vxe-table如何在單元格中渲染簡單的餅圖

更新時(shí)間：2022年09月13日 15:27:01 作者：仰望.

這篇文章主要介紹了vxe-table如何在單元格中渲染簡單的餅圖，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vxe-table在單元格中渲染餅圖

有時(shí)候遇到比較特殊的需求，比如在很小的單元格中要放個(gè)餅圖，如果使用 echart 等圖表插件又顯得太笨重了，畢竟單元格大小有限，vxe-table 官方也提供了一個(gè)非常流暢簡單圖表渲染，僅用于單元格

具體如下：

在這里插入圖片描述

安裝插件

npm install vxe-table-plugin-renderer

```javascript
import Vue from 'vue'
import VXETable from 'vxe-table'
import VXETablePluginRenderer from 'vxe-table-plugin-renderer'
import 'vxe-table/lib/style.css'
import 'vxe-table-plugin-renderer/dist/style.css'
VXETable.use(VXETablePluginRenderer)
Vue.use(VXETable)

基本參數(shù)

## bar-柱狀圖
props:
| 屬性 | 描述 | 類型 |
|------|------|-----|
| bar.width | 柱子寬度 | number | string |
| bar.max | 柱子最大值 | number |
| colors | 柱子顏色列表 | string[] |
| tooltip.formatter | 提示內(nèi)容格式 | string |
| label.color | 顯示值的顏色 | string |
| label.formatter | 顯示值的格式（{row, value}） | string |
# pie-餅圖
props:
| 屬性 | 描述 | 類型 |
|------|------|-----|
| diameter | 餅圖直徑 | number |
| margin | 餅圖間距 | number | 
| colors | 扇區(qū)的顏色列表 | string[] |
| tooltip.formatter | 提示內(nèi)容格式 | string |
| ring.diameter| 內(nèi)圓直徑 | number |
| ring.color | 內(nèi)圓的顏色 | string |
| label.color | 顯示值的顏色 | string |
| label.formatter | 顯示值的格式（{row, value}） | string |

<vxe-table 
  border
  resizable
  show-overflow
  height="400"
  :data="tableData">
  <vxe-column type="seq" width="60"></vxe-column>
  <vxe-column field="name" title="名稱"></vxe-column>
  <vxe-column field="role" title="職務(wù)"></vxe-column>
  <vxe-column field="num3" title="項(xiàng)目進(jìn)度" width="140" :cell-render="{name: 'bar', props: {bar: {max: 100 },label: {formatter: '{value}%'}}}"></vxe-column>
  <vxe-column field="num1" title="項(xiàng)目進(jìn)度" width="100" :cell-render="{name: 'pie', props: {ring: { diameter: '60%' }, tooltip: {formatter: '名稱：{row.name}\n進(jìn)度：{value}%'}}}"></vxe-column>
  <vxe-column field="num2" title="完成比例" width="140" :cell-render="{name: 'pie', props: {tooltip: {formatter: '比例：{value}'}}}"></vxe-column>
</vxe-table>

export default {
  data() {
    return {
      tableData: [
          { name: 'test1', role: 'Developer', num1: [12, 34, 62], num2: [24, 81, 28], num3: [13, 45, 10] },
          { name: 'test2', role: 'Tester', num1: [41, 12, 33], num2: [86, 9, 16], num3: [13, 45, 96] },
          { name: 'test3', role: 'Developer', num1: [96, 75, 28], num2: [47, 72, 37], num3: [22, 97, 100] },
          { name: 'test4', role: 'Developer', num1: [33, 75, 77], num2: [46, 12, 97], num3: [13, 45, 24] },
          { name: 'test5', role: 'Tester', num1: [96, 75, 24], num2: [8, 72, 37], num3: [13, 45, 96] },
          { name: 'test6', role: 'Developer', num1: [7, 55, 88], num2: [84, 72, 110], num3: [64, 45, 71] },
          { name: 'test7', role: 'Tester', num1: [96, 75, 28], num2: [74, 36, 37], num3: [23, 45, 96] },
          { name: 'test8', role: 'Developer', num1: [41, 11, 66], num2: [64, 24, 99], num3: [53, 4, 96] },
          { name: 'test9', role: 'Tester', num1: [22, 14, 28], num2: [11, 72, 37], num3: [34, 45, 96] },
          { name: 'test10', role: 'Developer', num1: [96, 75, 22], num2: [47, 22, 10], num3: [22, 44, 40] }
      ]
    }
  }
}

解決vxe-table的表頭動態(tài)渲染第一次不顯示

問題描述

vxe-table表頭當(dāng)使用了<vxe-colgroup>(二級/多級表頭)，設(shè)一級表頭寫死，二級表頭動態(tài)加載，那么每次賦值二級表頭時(shí)，值賦上去了，頁面不響應(yīng)，第一次加載不渲染。

為什么會這樣？

vxe-table數(shù)據(jù)響應(yīng)是根據(jù)v-for的key進(jìn)行檢索，如果一級表頭key不變，那么就不會重新渲染

解決方法

給最外層的的for循環(huán)的key加隨機(jī)數(shù)，即:key="index+Math.random()",每次渲染時(shí)，一級表頭綁定的key都是不一樣，那么就渲染成功啦（Math.round(Math.random() * 1000)）一個(gè)整數(shù)

（給key加了隨機(jī)數(shù)，如果表格是可以有部分是編輯的輸入框，可能會出現(xiàn)，輸入一次后鼠標(biāo)會失焦，解決方法：不要直接把隨機(jī)數(shù)加在:key上，用一個(gè)變量從父組件傳進(jìn)來，默認(rèn)是0，當(dāng)父組件的動態(tài)渲染完成后，執(zhí)行一次Math.round(Math.random() * 1000)，理由：（我猜的）當(dāng)在輸入一次的時(shí)候，表頭是的key會再次隨機(jī)，那么就是重新渲染，即會造成失焦，可能是直接換了一個(gè)dom）

如果覺得進(jìn)入頁面等一點(diǎn)點(diǎn)時(shí)間，表頭才變，可以給<vxe-table>加:loading="loading"，即在渲染時(shí)，設(shè)true，渲染完成后設(shè)false

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: