vxe-table-plugin-renderer

vxe-table-plugin-renderer （该版本已停止维护）

！！！您正在查看的是 vxe-table 4.0 ~ 4.6 版本的扩展插件，该插件于 2024-12-01 起停止维护，此后它将不再推出新功能、更新或修复补丁。最新版本为 vxe-table 4.7+，对应扩展插件库 @vxe-ui/plugin-render-chart，建议及时更新到新版本，避免出现 bug 与安全问题！！！

基于 vxe-table 表格的增强插件，提供一些常用的渲染器

Compatibility

依赖 vxe-table v4 版本

Installing

npm install vxe-table@next vxe-table-plugin-renderer@next

// ...
import VXETable from 'vxe-table'
import VXETablePluginRenderer from 'vxe-table-plugin-renderer'
import 'vxe-table-plugin-renderer/dist/style.css'
// ...

VXETable.use(VXETablePluginRenderer)

API

bar 柱状图

bar Props

pie 饼图

pie Props

rate 评分

rate Props

Demo

<vxe-table
  border
  show-overflow
  height="400"
  :data="tableData">
  <vxe-column type="checkbox" width="60"></vxe-column>
  <vxe-column field="name" width="200"></vxe-column>
  <vxe-column field="num1" title="Bar" :cell-render="{name: 'bar'}"></vxe-column>
  <vxe-column field="num2" title="Ring" :cell-render="{name: 'pie'}"></vxe-column>
  <vxe-column field="num3" title="Rate" :cell-render="{name: 'rate'}"></vxe-column>
</vxe-table>

export default {
  data () {
    return {
      tableData: [
        { id: 100, name: 'test1', num1: [30, 47], num2: [60, 36, 36], num3: 3 },
        { id: 101, name: 'test2', num1: [15, 22], num2: [85, 22, 97], num3: 1 },
        { id: 102, name: 'test3', num1: [75, 36], num2: [45, 84, 66], num3: 5 }
      ]
    }
  }
}

License

MIT License, 2019-present, Xu Liangzhan