在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:vxe-table-plugin-charts开源软件地址:https://gitee.com/x-extends/vxe-table-plugin-charts开源软件介绍:vxe-table-plugin-charts基于 vxe-table PRO 的图表渲染插件,基于 echarts 实现 Installingnpm install xe-utils vxe-table@next vxe-table-plugin-charts@next echarts // ...import VXETable from 'vxe-table'import echarts from 'echarts'import VXETablePluginCharts from 'vxe-table-plugin-charts'import 'vxe-table-plugin-charts/dist/style.css'// ...VXETable.use(VXETablePluginCharts) Import on demand// ...import 'echarts/lib/chart/bar'import 'echarts/lib/chart/pie'import 'echarts/lib/chart/line'import 'echarts/lib/component/grid'import 'echarts/lib/component/tooltip'import 'echarts/lib/component/legend'import 'echarts/lib/component/legendScroll'import VXETablePluginCharts from 'vxe-table-plugin-charts'import 'vxe-table-plugin-charts/dist/style.css'// ...VXETable.use(VXETablePluginCharts) APIContext menu codes
Demo<vxe-table resizable height="500" :data="tableData" :mouse-config="{ area: true }" :context-menu="{body: {options: bodyMenus}}" :edit-config="{trigger: 'dblclick', mode: 'cell'}"> <vxe-column type="seq" width="60"></vxe-column> <vxe-column field="nickname" title="Nickname" :edit-render="{name: 'input'}"></vxe-column> <vxe-column field="sex" title="sex" :edit-render="{name: 'input'}"></vxe-column> <vxe-column field="age" title="Age" :edit-render="{name: 'input'}"></vxe-column> <vxe-column field="rate" title="Rate" :edit-render="{name: 'input'}"></vxe-column></vxe-table> export default { data () { return { tableData: [ { id: 100, name: 'Test1', nickname: 'Nickname1', sex: '1', age: 26, rate: '3' }, { id: 100, name: 'Test2', nickname: 'Nickname2', sex: '0', age: 28, rate: '5' } ], bodyMenus: [ [ { code: 'CHART_LINE', name: '折线图' } ] ] } }} LicenseMIT © 2019-present, Xu Liangzhan |
请发表评论