x-extends/vxe-table-plugin-renderer
Fork: 2 Star: 6 (更新于 1970-01-01 00:00:00)
license: MIT
Language: TypeScript .
基于 vxe-table 表格的增强插件，提供一些常用的渲染器
最后发布版本： 1.3.4 ( 2021-03-23 23:22:38)
vxe-table-plugin-renderer
基于 vxe-table 表格的增强插件，提供一些常用的渲染器
Compatibility
依赖 vxe-table v4 版本
Installing
npm install xe-utils 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
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| bar.width | 柱子宽度 | number | string | — |
| bar.max | 柱子最大值 | number | — | — |
| colors | 柱子颜色列表 | string[] | — | — |
| tooltip.formatter | 提示内容格式 | string | — | — |
| label.color | 显示值的颜色 | string | — | — |
| label.formatter | 显示值的格式（{row, value}） | string | — | — |
pie 饼图
pie Props
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| diameter | 饼图直径 | number | string | — |
| margin | 饼图间距 | number | string | — |
| colors | 扇区的颜色列表 | string[] | — | — |
| tooltip.formatter | 提示内容格式 | string | — | — |
| ring.diameter | 内圆直径 | number | string | — |
| ring.color | 内圆的颜色 | string | — | — |
| label.color | 显示值的颜色 | string | — | — |
| label.formatter | 显示值的格式（{row, value}） | string | — | — |
rate 评分
rate Props
| 属性 | 描述 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| colors | 每一项的颜色列表 | string[] | — | — |
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
最近版本更新:(数据更新于 1970-01-01 00:00:00)
2021-03-23 23:22:38 1.3.4
2021-03-16 17:56:09 3.0.1
2021-03-16 09:49:55 3.0.0
2021-03-16 09:46:33 1.3.3
2021-03-16 09:46:10 1.3.2
2021-03-16 09:45:54 1.3.1
2020-11-26 19:35:54 1.3.0
2019-10-06 16:26:34 1.1.0
2019-09-28 20:25:00 1.0.6
2019-09-26 23:26:41 1.0.5
主题(topics):
vxe-table
x-extends/vxe-table-plugin-renderer同语言 TypeScript最近更新仓库
2024-12-21 21:40:12 lobehub/lobe-chat
2024-12-21 12:01:51 siyuan-note/siyuan
2024-12-21 10:57:01 ai16z/eliza
2024-12-21 09:15:35 MetaCubeX/metacubexd
2024-12-21 04:50:26 mediar-ai/screenpipe
2024-12-20 19:36:48 vitejs/vite