vxe-table 树表格拖拽排序，支持拖拽到空节点，直接拖拽成子级；通过 row-drag-config.isToChildDrag 启用便捷拖拽成子节点，拖拽的同时按住 Ctrl 键可以自动拖放到该节点的子级 通过 row-drag-config.isToChildDrag 启用便捷拖拽成子节点，拖拽的同时按住 Ctrl 键可以自动拖放到该节点的子级<template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </template> <script setup> import { reactive } from 'vue' const gridOptions = reactive({ border: true, rowConfig: { useKey: true, drag: true }, rowDragConfig: { isCrossDrag: true, isSelfToChildDrag: true, isToChildDrag: true }, columnConfig: { useKey: true }, treeConfig: { transform: true, rowField: 'id', parentField: 'parentId' }, columns: [ { type: 'seq', width: 70 }, { field: 'name', title: 'Name', minWidth: 300, treeNode: true, dragSort: true }, { field: 'size', title: 'Size' }, { field: 'type', title: 'Type' }, { field: 'date', title: 'Date' } ], data: [ { id: 10000, parentId: null, name: 'Test1', type: 'mp3', size: 1024, date: '2020-08-01' }, { id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: 0, date: '2021-04-01' }, { id: 24300, parentId: 10050, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' }, { id: 20045, parentId: 24300, name: 'Test4', type: 'html', size: 600, date: '2021-04-01' }, { id: 10053, parentId: 24300, name: 'Test5', type: 'avi', size: 0, date: '2021-04-01' }, { id: 24330, parentId: 10053, name: 'Test6', type: 'txt', size: 25, date: '2021-10-01' }, { id: 21011, parentId: 10053, name: 'Test7', type: 'pdf', size: 512, date: '2020-01-01' }, { id: 22200, parentId: 10053, name: 'Test8', type: 'js', size: 1024, date: '2021-06-01' }, { id: 23666, parentId: null, name: 'Test9', type: 'xlsx', size: 2048, date: '2020-11-01' }, { id: 23677, parentId: 23666, name: 'Test10', type: 'js', size: 1024, date: '2021-06-01' }, { id: 23671, parentId: 23677, name: 'Test11', type: 'js', size: 1024, date: '2021-06-01' }, { id: 23672, parentId: 23677, name: 'Test12', type: 'js', size: 1024, date: '2021-06-01' }, { id: 23688, parentId: 23666, name: 'Test13', type: 'js', size: 1024, date: '2021-06-01' }, { id: 23681, parentId: 23688, name: 'Test14', type: 'js', size: 1024, date: '2021-06-01' }, { id: 23682, parentId: 23688, name: 'Test15', type: 'js', size: 1024, date: '2021-06-01' }, { id: 24555, parentId: null, name: 'Test16', type: 'avi', size: 224, date: '2020-10-01' }, { id: 24566, parentId: 24555, name: 'Test17', type: 'js', size: 1024, date: '2021-06-01' }, { id: 24577, parentId: 24555, name: 'Test18', type: 'js', size: 1024, date: '2021-06-01' } ] }) </script> 转载自https://www.cnblogs.com/qaz666/p/18598387

vxe-table 树结构单元格选取与复制粘贴，通过 tree-config.transform 使用树形表格 <template> <div> <vxe-table border show-overflow keep-source height="600" :column-config="columnConfig" :tree-config="treeConfig" :mouse-config="mouseConfig" :area-config="areaConfig" :edit-config="editConfig" :clip-config="clipConfig" :keyboard-config="keyboardConfig" :data="tableData"> <vxe-column type="seq" width="80"></vxe-column> <vxe-column field="name" title="名称" min-width="300" tree-node :edit-render="{ name: 'input' }"></vxe-column> <vxe-column field="size" title="大小" width="140" :edit-render="{ name: 'input' }"></vxe-column> <vxe-column field="type" title="类型" width="140" :edit-render="{ name: 'input' }"></vxe-column> <vxe-column field="createBy" title="创建人" width="200" :edit-render="{ name: 'input' }"></vxe-column> <vxe-column field="updateDate" title="修改时间" width="200" :edit-render="{ name: 'input' }"></vxe-column> <vxe-column field="createDate" title="创建时间" width="200" :edit-render="{ name: 'input' }"></vxe-column> </vxe-table> </div> </template> <script> export default { data () { const tableData = [ { id: 10000, parentId: null, name: '文件1.xlsx', type: 'xlsx', size: 1024, createBy: '王五', updateDate: '2020-09-11', createDate: '2020-08-01' }, { id: 10050, parentId: null, name: '部署目录', type: '', size: 0, createBy: '老六', updateDate: '2020-08-01', createDate: '2021-04-01' }, { id: 24300, parentId: 10050, name: '菜单配置.avi', type: 'avi', size: 1024, createBy: '小芳', updateDate: '2020-10-24', createDate: '2020-03-01' }, { id: 20045, parentId: 24300, name: '角色说明.html', type: 'html', size: 600, createBy: '老徐', updateDate: '2020-08-01', createDate: '2021-04-01' }, { id: 10053, parentId: 24300, name: '权限配置.avi', type: 'avi', size: 0, createBy: '老胡', updateDate: '', createDate: '2021-04-01' }, { id: 24330, parentId: 10053, name: '部署秘钥.txt', type: 'txt', size: 25, createBy: '张三', updateDate: '2020-09-11', createDate: '2021-10-01' }, { id: 21011, parentId: 10053, name: '流程文档。pdf', type: 'pdf', size: 512, createBy: '老张', updateDate: '2020-08-01', createDate: '2020-01-01' }, { id: 22200, parentId: 10053, name: '解决 bug 文件.js', type: 'js', size: 1024, createBy: '小刘', updateDate: '2020-10-24', createDate: '2021-06-01' }, { id: 23666, parentId: null, name: '发版目录', type: '', size: 2048, createBy: '老刘', updateDate: '2020-02-18', createDate: '2020-11-01' }, { id: 23677, parentId: 23666, name: '替换问题文件.js', type: 'js', size: 1024, createBy: '老冯', updateDate: '2020-09-11', createDate: '2021-06-01' }, { id: 23671, parentId: 23677, name: '发布流程.avi', type: 'avi', size: 1024, createBy: '小牛', updateDate: '2020-08-01', createDate: '2021-06-01' }, { id: 23672, parentId: 23677, name: '配置流程.mp4', type: 'mp4', size: 1024, createBy: '李四', updateDate: '2020-02-09', createDate: '2021-06-01' }, { id: 23688, parentId: 23666, name: '测试流程.mp4', type: 'mp4', size: 1024, createBy: '小三', updateDate: '2020-10-24', createDate: '2021-06-01' }, { id: 23681, parentId: 23688, name: '问题记录.txt', type: 'txt', size: 1024, createBy: '小李', updateDate: '2020-08-01', createDate: '2021-06-01' }, { id: 23682, parentId: 23688, name: '发布说明.html', type: 'html', size: 1024, createBy: '小徐', updateDate: '2020-02-18', createDate: '2021-06-01' }, { id: 24555, parentId: null, name: '资源目录', type: '', size: 224, createBy: '小小', updateDate: '2020-08-01', createDate: '2020-10-01' }, { id: 24566, parentId: 24555, name: '铃声文件.mp3', type: 'mp3', size: 1024, createBy: '老八', updateDate: '2020-02-29', createDate: '2021-06-01' }, { id: 24577, parentId: 24555, name: '上线人员列表.xlsx', type: 'xlsx', size: 1024, createBy: '小红', updateDate: '2020-08-01', createDate: '2021-06-01' } ] const columnConfig = { resizable: true } const treeConfig = { transform: true, rowField: 'id', parentField: 'parentId' } const mouseConfig = { area: true // 是否开启区域选取 } const areaConfig = { multiple: true // 是否启用多区域选取功能 } const editConfig = { mode: 'cell', trigger: 'dblclick', showStatus: true } const clipConfig = { isDeepPaste: true // 是否深层粘贴，用于树结构，启用后粘贴时会覆盖到子级数据进行粘贴 } const keyboardConfig = { isClip: true, isArrow: true, isShift: true, isTab: true, isEnter: true, isEdit: true, isDel: true, isEsc: true, isFNR: true // 是否开启查找与替换 } return { tableData, columnConfig, treeConfig, mouseConfig, areaConfig, editConfig, clipConfig, keyboardConfig } } } </script> 转载自https://www.cnblogs.com/qaz666/p/18578665

 <template> <div> <vxe-table border header-align="center" align="left" :data="tableData"> <vxe-column type="seq" width="70"></vxe-column> <vxe-column field="name" title="Name"></vxe-column> <vxe-column field="sex" title="Sex"></vxe-column> <vxe-column field="age" title="Age"></vxe-column> </vxe-table> </div> </template> <script> export default { data () { const tableData = [ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' }, { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' } ] return { tableData } } } </script> 转载自https://www.cnblogs.com/qaz666/p/18566295

<template> <div> <vxe-upload v-model="imgList" mode="image" multiple show-progress :upload-method="uploadMethod"></vxe-upload> </div> </template> <script> import axios from 'axios' export default { data () { const imgList = [] const uploadMethod = ({ file }) => { const formData = new FormData() formData.append('file', file) return axios.post('/api/pub/upload/single', formData).then((res) => { return { ...res.data } }) } return { imgList, uploadMethod } } } </script>转载自https://www.cnblogs.com/qaz666/p/18563025

 <template> <div> <vxe-button status="success" @click="resultEvent">获取列</vxe-button> <vxe-table border ref="tableRef" :column-config="columnConfig" :data="tableData"> <vxe-column field="name" title="Name"></vxe-column> <vxe-column field="role" title="Role"></vxe-column> <vxe-column field="sex" title="Sex"></vxe-column> <vxe-column field="age" title="Age"></vxe-column> <vxe-column field="address" title="Address"></vxe-column> </vxe-table> </div> </template> <script> export default { data () { const tableData = [ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' }, { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' } ] const columnConfig = { useKey: true, drag: true } return { tableData, columnConfig } }, methods: { resultEvent () { const $table = this.$refs.tableRef if ($table) { const { visibleColumn } = $table.getTableColumn() console.log(visibleColumn) } } } } </script> 转载自https://www.cnblogs.com/qaz666/p/18562144

 <template> <div> <vxe-table border ref="tableRef" :row-config="rowConfig" :column-config="columnConfig" :data="tableData"> <vxe-column field="name" title="Name" drag-sort></vxe-column> <vxe-column field="role" title="Role" drag-sort></vxe-column> <vxe-column field="sex" title="Sex"></vxe-column> <vxe-column field="age" title="Age"></vxe-column> <vxe-column field="address" title="Address" drag-sort></vxe-column> </vxe-table> </div> </template> <script> export default { data () { const tableData = [ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' }, { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' } ] const rowConfig = { useKey: true, drag: true } const columnConfig = { useKey: true } return { tableData, rowConfig, columnConfig } } } </script> 转载自https://www.cnblogs.com/qaz666/p/18562136

在 vxe-table 中使用 vxe-grid 渲染表格，当配置式不能满足需求时，。需要使用自定义插槽模板来自定义业务需求，实现更灵活的功能。vxe-grid 支持多种自定义方式，可以使用插槽模板，也可以使用插槽来自定义模板。自定义单元格模板 <template> <div> <vxe-grid v-bind="gridOptions"> <template #imgUrl_default="{ row }"> <vxe-image :src="row.imgUrl" width="36" height="30"></vxe-image> </template> <template #name_default="{ row }"> <vxe-button mode="text" @click="openDetail(row)">点击{{ row.name }}</vxe-button> </template> <template #sex_default="{ row }"> <span>{{ formatSex(row) }}</span> </template> <template #address_default="{ row }"> <vxe-image src="https://vxeui.com/resource/img/546.gif" width="36" height="30"></vxe-image> <span>{{ row.address }}</span> <vxe-image src="https://n.sinaimg.cn/sinacn17/w120h120/20180314/89fc-fyscsmv5911424.gif" width="30" height="30"></vxe-image> </template> </vxe-grid> </div> </template> <script setup> import { reactive } from 'vue' import { VxeUI } from 'vxe-table' const gridOptions = reactive({ border: true, showOverflow: true, columns: [ { type: 'seq', width: 70 }, { field: 'imgUrl', title: 'imgUrl', slots: { default: 'imgUrl_default' } }, { field: 'name', title: 'Name', slots: { default: 'name_default' } }, { title: 'Group1', children: [ { field: 'sex', title: 'Sex', slots: { default: 'sex_default' } }, { field: 'num', title: 'Number' }, { field: 'age', title: 'Age' } ] }, { field: 'address', title: 'Address', width: 200, slots: { default: 'address_default' } } ], data: [ { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, num: 234, imgUrl: 'https://vxeui.com/resource/img/fj577.jpg', address: 'test abc' }, { id: 10002, name: 'Test2', role: 'Test', sex: '1', age: 22, num: 34, imgUrl: 'https://vxeui.com/resource/img/fj581.jpeg', address: 'Guangzhou' }, { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, num: 12, imgUrl: 'https://vxeui.com/resource/img/fj581.jpeg', address: 'Shanghai' } ] }) const formatSex = (row) => { return row.sex === '1' ? '男' : '女' } const openDetail = (row) => { VxeUI.modal.message({ status: 'success', content: `点击了${row.name}` }) } </script> 转载自https://www.cnblogs.com/qaz666/p/18561550

导出 HTML 文件 <template> <div> <vxe-button @click="exportEvent">直接导出 HTML 文件</vxe-button> <vxe-table show-footer ref="tableRef" :export-config="{}" :footer-data="footerData" :data="tableData"> <vxe-column field="seq" type="seq" width="70"></vxe-column> <vxe-colgroup title="分组1"> <vxe-column field="name" title="Name"></vxe-column> </vxe-colgroup> <vxe-colgroup title="分组2"> <vxe-column field="sex" title="Sex"></vxe-column> <vxe-column field="age" title="Age"></vxe-column> </vxe-colgroup> </vxe-table> </div> </template> <script> export default { data () { const tableData = [ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' }, { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' } ] const footerData = [ { seq: '合计', sex: '666', age: '999' } ] return { tableData, footerData } }, methods: { exportEvent () { const $table = this.$refs.tableRef if ($table) { $table.exportData({ type: 'html' }) } } } } </script> 转载自http://cnblogs.com/qaz666/p/18560845

导出时单元格类型默认是自动转换的，如果是需要字符串类型，可以通过 column.cell-type 设置 <template> <div> <vxe-button @click="exportEvent">直接导出 CSV 文件</vxe-button> <vxe-table show-footer ref="tableRef" :export-config="{}" :footer-data="footerData" :data="tableData"> <vxe-column field="seq" type="seq" width="70"></vxe-column> <vxe-column field="name" title="Name"></vxe-column> <vxe-column field="sex" title="Sex"></vxe-column> <vxe-column field="no1" title="NO1"></vxe-column> <vxe-column field="no2" title="NO2" cell-type="string"></vxe-column> </vxe-table> </div> </template> <script> export default { data () { const tableData = [ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', no1: '028', no2: '028' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', no1: '220', no2: '220' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', no1: '003200', no2: '003200' }, { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', no1: '02040', no2: '02040' } ] const footerData = [ { seq: '合计', sex: '666', age: '999' } ] return { tableData, footerData } }, methods: { exportEvent () { const $table = this.$refs.tableRef if ($table) { $table.exportData({ type: 'csv' }) } } } } </script> 转载自https://www.cnblogs.com/qaz666/p/18560839

轻量级图表，超高性能的在表格中渲染柱状图，即使是渲染上万条数据单元格图表，也是丝滑流畅。npm install vxe-pc-ui@4.3.2 vxe-table@4.9.3 @vxe-ui/plugin-render-chart@4.0.1// ...import { VxeUI } from 'vxe-pc-ui'import VxeUIPluginRenderChart from '@vxe-ui/plugin-render-chart'import '@vxe-ui/plugin-render-chart/dist/style.css'// ...VxeUI.use(VxeUIPluginRenderChart)评分 <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </template> <script> export default { data () { return { gridOptions: { border: true, showOverflow: true, height: 500, columnConfig: { resizable: true }, columns: [ { type: 'seq', width: 70 }, { field: 'name', title: 'Name' }, { field: 'num41', title: '评分', width: 180, cellRender: { name: 'rate' } }, { field: 'num42', title: '评分 - 自定义颜色', width: 180, cellRender: { name: 'rate', props: { colors: ['#91C7AE', '#D48265'] } } } ], data: [ { id: 101, name: 'test1', num41: 1, num42: 4 }, { id: 102, name: 'test2', num41: 3, num42: 0 }, { id: 103, name: 'test3', num41: 1, num42: 1 }, { id: 104, name: 'test4', num41: 3, num42: 4 }, { id: 105, name: 'test5', num41: 1, num42: 3 }, { id: 106, name: 'test6', num41: 3, num42: 3 }, { id: 107, name: 'test7', num41: 2, num42: 1 }, { id: 108, name: 'test8', num41: 0, num42: 4 }, { id: 109, name: 'test9', num41: 1, num42: 2 }, { id: 1010, name: 'test10', num41: 4, num42: 2 } ] } } } } </script> 柱状图 <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </template> <script> export default { data () { return { gridOptions: { border: true, showOverflow: true, height: 500, columnConfig: { resizable: true }, columns: [ { type: 'seq', width: 70 }, { field: 'name', title: 'Name' }, { field: 'num10', title: '柱状图', width: 200, cellRender: { name: 'bar', props: { bar: { max: 100 }, label: { formatter: '{value}%' } } } }, { field: 'num11', title: '柱状图 - 显示值', width: 200, cellRender: { name: 'bar', props: { label: { formatter: '{value}' } } } }, { field: 'num12', title: '柱状图 - 最大值', width: 200, cellRender: { name: 'bar', props: { bar: { max: 140 }, colors: ['#FFDB5C', '#91C7AE', '#D48265'], tooltip: { formatter: '值：{value}%' }, label: { formatter: '{value}%' } } } } ], data: [ { id: 101, name: 'test1', num10: [60], num11: [60, 111], num12: [60, 134, 76] }, { id: 102, name: 'test2', num10: [85], num11: [33, 25], num12: [42, 73, 22] }, { id: 103, name: 'test3', num10: [45], num11: [60, 104], num12: [6, 64, 44] }, { id: 104, name: 'test4', num10: [88], num11: [76, 99], num12: [41, 81, 77] }, { id: 105, name: 'test5', num10: [72], num11: [27, 157], num12: [48, 101, 76] }, { id: 106, name: 'test6', num10: [50], num11: [8, 111], num12: [60, 5, 19] }, { id: 107, name: 'test7', num10: [16], num11: [60, 6], num12: [9, 57, 34] }, { id: 108, name: 'test8', num10: [24], num11: [23, 68], num12: [35, 111, 80] }, { id: 109, name: 'test9', num10: [100], num11: [14, 66], num12: [27, 34, 98] }, { id: 1010, name: 'test10', num10: [98], num11: [44, 98], num12: [29, 107, 127] } ] } } } } </script>  饼图 <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </template> <script> export default { data () { return { gridOptions: { border: true, showOverflow: true, height: 500, columnConfig: { resizable: true }, columns: [ { type: 'seq', width: 70 }, { field: 'name', title: 'Name' }, { field: 'num20', title: '饼图 - 环形', width: 100, cellRender: { name: 'pie', props: { ring: { diameter: '60%' } } } }, { field: 'num21', title: '饼图 - 自定义环形', width: 140, cellRender: { name: 'pie', props: { colors: ['#FFDB5C', '#F0F0F0'], ring: { diameter: '60%' }, label: { formatter: '{value[0]}%' } } } }, { field: 'num23', title: '饼图 - 实心', width: 100, cellRender: { name: 'pie' } }, { field: 'num30', title: '饼图 - 自定义实心', width: 140, cellRender: { name: 'pie', props: { colors: ['#FFDB5C', '#91C7AE', '#D48265'], ring: { diameter: '60%', color: '#2F4554' }, label: { color: '#ffffff', formatter: '概况' } } } }, { field: 'num31', title: '多种混合', width: 200, cellRender: { name: 'pies', children: [ { props: { tooltip: { formatter: '值：{value}' }, colors: ['#FFDB5C', '#D48265'], ring: { diameter: '60%' } } }, { props: { tooltip: { formatter: '值：{value}' } } }, { props: { tooltip: { formatter: '值：{value}' } } } ] } } ], data: [ { id: 101, name: 'test1', num20: [30, 70], num21: [30, 70], num30: [47, 67, 67], num31: [[60, 28, 26], [77, 100], [77, 100, 8, 55, 100, 77, 142]], num23: [20, 30, 50] }, { id: 102, name: 'test2', num20: [50, 50], num21: [60, 40], num30: [60, 83, 33], num31: [[28, 60, 32], [88, 40], [22, 100, 9, 55, 111, 86, 100]], num23: [200, 400, 500] }, { id: 103, name: 'test3', num20: [33, 67], num21: [27, 78], num30: [84, 11, 14], num31: [[100, 17, 39], [100, 220], [7, 100, 11, 77, 105, 77, 100]], num23: [10, 80, 10] }, { id: 104, name: 'test4', num20: [11, 89], num21: [50, 50], num30: [25, 71, 67], num31: [[19, 76, 99], [77, 702], [33, 100, 77, 66, 174, 69, 100]], num23: [80, 10, 10] }, { id: 105, name: 'test5', num20: [19, 81], num21: [67, 33], num30: [100, 29, 55], num31: [[35, 63, 100], [53, 8], [77, 100, 66, 33, 100, 97, 100]], num23: [18, 30, 26] }, { id: 106, name: 'test6', num20: [16, 84], num21: [17, 83], num30: [66, 100, 67], num31: [[13, 57, 60], [330, 546], [11, 100, 58, 72, 100, 178, 100]], num23: [14, 33, 26] }, { id: 107, name: 'test7', num20: [98, 2], num21: [86, 14], num30: [60, 9, 5], num31: [[60, 40, 0], [120, 100], [22, 100, 77, 44, 10, 77, 198]], num23: [20, 5, 15] }, { id: 108, name: 'test8', num20: [63, 37], num21: [99, 1], num30: [55, 76, 67], num31: [[46, 71, 83], [77, 100], [77, 100, 65, 97, 9, 59, 100]], num23: [10, 20, 30, 40] }, { id: 109, name: 'test9', num20: [48, 52], num21: [8, 92], num30: [97, 60, 41], num31: [[55, 33, 53], [747, 52], [73, 100, 78, 81, 100, 77, 174]], num23: [14, 20, 36] }, { id: 1010, name: 'test10', num20: [72, 28], num21: [22, 78], num30: [17, 10, 31], num31: [[77, 100, 58], [75, 85], [14, 250, 59, 44, 16, 50, 100]], num23: [200, 400, 500] } ] } } } } </script> 转载自https://www.cnblogs.com/qaz666/p/18560825

在 vxe-table 中，使用 echarts 实现表格通过右键菜单渲染折线图、饼图、柱状图等，通过扩展插件就能实现简单的配置渲染单元格图表 <template> <div> <vxe-grid v-bind="gridOptions" @menu-click="menuClickEvent"> </vxe-grid> </div> </template> <script> export default { data () { const gridOptions = { border: true, height: 500, showOverflow: true, columnConfig: { resizable: true }, editConfig: { mode: 'cell', trigger: 'dblclick' }, mouseConfig: { area: true // 是否开启区域选取 }, keyboardConfig: { isArrow: true, isShift: true, isTab: true, isEnter: true, isEdit: true, isDel: true, isEsc: true, isFNR: true // 是否开启查找与替换 }, menuConfig: { body: { options: [ [ { code: 'myCode', name: '自定义的菜单' } ], // vxe-table-plugin-charts 之后可以直接使用内置 code，也可以自行实现 [ { name: '创建图表', children: [ { code: 'CHART_BAR_X_AXIS', name: '横向柱状图 - 自由选择', prefixIcon: 'vxe-icon-chart-bar-x' }, { code: 'CHART_BAR_X_AXIS', name: '横向柱状图 - 固定类别', prefixIcon: 'vxe-icon-chart-bar-x', params: { category: 'name' } }, { code: 'CHART_BAR_Y_AXIS', name: '纵向柱状图 - 自由选择', prefixIcon: 'vxe-icon-chart-bar-y' }, { code: 'CHART_BAR_Y_AXIS', name: '纵向柱状图 - 固定类别', prefixIcon: 'vxe-icon-chart-bar-y', params: { category: 'name' } }, { code: 'CHART_LINE', name: '折线图 - 自由选择', prefixIcon: 'vxe-icon-chart-line' }, { code: 'CHART_LINE', name: '折线图 - 固定类别', prefixIcon: 'vxe-icon-chart-line', params: { category: 'name' } }, { code: 'CHART_PIE', name: '饼图 - 自由选择', prefixIcon: 'vxe-icon-chart-pie' }, { code: 'CHART_PIE', name: '饼图 - 固定类别', prefixIcon: 'vxe-icon-chart-pie', params: { category: 'name' } } ] } ] ] } }, columns: [ { type: 'seq', width: 60 }, { field: 'name', title: 'name', editRender: { name: 'input' } }, { field: 'num1', title: 'Sum', editRender: { name: 'input' } }, { field: 'num2', title: 'Plan', editRender: { name: 'input' } }, { field: 'num3', title: 'Complete', editRender: { name: 'input' } }, { field: 'num4', title: 'Unfinished', editRender: { name: 'input' } }, { field: 'num5', title: 'Success', editRender: { name: 'input' } }, { field: 'num6', title: 'Error', editRender: { name: 'input' } } ], data: [ { id: 10001, name: 'Test1', role: 'Develop', num1: 4, num2: 45, num3: 77, num4: 42, num5: 23, num6: 67 }, { id: 10002, name: 'Test2', role: 'Test', num1: 23, num2: 52, num3: 23, num4: 45, num5: 78, num6: 23 }, { id: 10003, name: 'Test3', role: 'PM', num1: 22, num2: 41, num3: 88, num4: 12, num5: 23, num6: 23 }, { id: 10004, name: 'Test4', role: 'Designer', num1: 3, num2: 66, num3: 23, num4: 16, num5: 11, num6: 23 }, { id: 10005, name: 'Test5', role: 'Designer', num1: 23, num2: 76, num3: 12, num4: 23, num5: 34, num6: 78 }, { id: 10006, name: 'Test6', role: 'Designer', num1: 7, num2: 45, num3: 23, num4: 5, num5: 15, num6: 32 }, { id: 10007, name: 'Test7', role: 'Test', num1: 87, num2: 9, num3: 6, num4: 44, num5: 23, num6: 44 }, { id: 10008, name: 'Test8', role: 'PM', num1: 23, num2: 23, num3: 55, num4: 45, num5: 80, num6: 33 }, { id: 10009, name: 'Test9', role: 'Designer', num1: 8, num2: 90, num3: 8, num4: 4, num5: 23, num6: 50 }, { id: 10010, name: 'Test10', role: 'Test', num1: 88, num2: 23, num3: 2, num4: 23, num5: 18, num6: 23 } ] } return { gridOptions } }, methods: { menuClickEvent ({ menu }) { switch (menu.code) { case 'myCode': alert('自定义菜单') break } } } } </script> 转载自https://www.cnblogs.com/qaz666/p/18560807

通过手动调用 exportData 方法可以直接导出文件npm install vxe-pc-ui@4.3.2 vxe-table@4.9.3 @vxe-ui/plugin-export-pdf@4.0.8 jspdf@2.5.2<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jspdf@2.5.2/dist/jspdf.umd.js"></script>// ...import { VxeUI } from 'vxe-pc-ui'import VxeUIPluginExportPDF from '@vxe-ui/plugin-export-pdf'// ...// 确保 window.jsPDF 变量存在即表示安装完成VxeUI.use(VxeUIPluginExportPDF, { // 安装中文字体 // fontName: 'SourceHanSans-Normal', // fonts: [ // { // fontName: 'SourceHanSans-Normal', // fontUrl: 'https://cdn.jsdelivr.net/npm/@vxe-ui/plugin-export-pdf@4.0.8/fonts/source-han-sans-normal.js' // 字体库非常大，建议下载到项目本地 // } // ]})  <template> <div> <vxe-button @click="exportEvent">高级导出</vxe-button> <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid> </div> </template> <script> export default { data () { const gridOptions = { border: true, showFooter: true, exportConfig: { type: 'pdf' }, columns: [ { field: 'seq', type: 'seq', width: 70 }, { title: '分组1', children: [ { field: 'name', title: 'Name' }, { field: 'role', title: 'Role' } ] }, { field: 'sex', title: 'Sex' }, { field: 'age', title: 'Age' } ], data: [ { id: 10001, name: '张三', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' }, { id: 10002, name: '李四', role: 'Test', sex: 'Women', age: 22, address: '广东省' }, { id: 10003, name: '王五', role: 'PM', sex: 'Man', age: 32, address: '上海' }, { id: 10004, name: '老六', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' } ], footerData: [ { seq: '合计', name: '888人', age: 666 } ] } return { gridOptions } }, methods: { exportEvent () { const $grid = this.$refs.gridRef if ($grid) { $grid.openExport() } } } } </script>转载自https://www.cnblogs.com/qaz666/p/18560790

通过手动调用 exportData 方法可以直接导出文件，导出时单元格类型默认是自动转换的，如果是需要字符串类型，可以通过 column.cell-type 设置，也可以调用 openExport 方法打开导出面板npm install vxe-pc-ui@4.3.2 vxe-table@4.9.3 @vxe-ui/plugin-export-xlsx@4.0.7 exceljs@4.2.1<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/exceljs@4.4.0/dist/exceljs.min.js"></script>// ...import { VxeUI } from 'vxe-pc-ui'import VxeUIPluginExportXLSX from '@vxe-ui/plugin-export-xlsx'// ...// 确保 window.ExcelJS 变量存在即表示安装完成VxeUI.use(VxeUIPluginExportXLSX) <template> <div> <vxe-button @click="exportEvent">高级导出</vxe-button> <vxe-table border show-footer ref="tableRef" :export-config="{type: 'xlsx'}" :data="tableData" :merge-cells="mergeCells" :footer-data="footerData"> <vxe-column field="seq" type="seq" width="70"></vxe-column> <vxe-colgroup title="分组1"> <vxe-column field="name" title="Name"></vxe-column> <vxe-column field="role" title="Role"></vxe-column> </vxe-colgroup> <vxe-column field="sex" title="Sex"></vxe-column> <vxe-column field="age" title="Age"></vxe-column> </vxe-table> </div> </template> <script> export default { data () { const tableData = [ { id: 10001, name: '张三', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' }, { id: 10002, name: '李四', role: 'Test', sex: 'Women', age: 22, address: '广东省' }, { id: 10003, name: '王五', role: 'PM', sex: 'Man', age: 32, address: '上海' }, { id: 10004, name: '老六', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }, { id: 10005, name: '小七', role: 'Designer', sex: 'Man', age: 37, address: '广东省' }, { id: 10006, name: '小八', role: 'Designer', sex: 'Man', age: 39, address: 'Shanghai' } ] const mergeCells = [ { row: 0, col: 2, rowspan: 2, colspan: 2 }, { row: 2, col: 1, rowspan: 3, colspan: 2 } ] const footerData = [ { seq: '合计', name: '12人', no1: 356 } ] return { tableData, mergeCells, footerData } }, methods: { exportEvent () { const $table = this.$refs.tableRef if ($table) { $table.openExport() } } } } </script> 转载自https://www.cnblogs.com/qaz666/p/18560771

复制粘贴，通过 keyboard-config.isClip 启用，支持快捷键操作：Ctrl + A 选择全部单元格;Ctrl + X 将单元格标记为剪贴状态并将内容复制到剪贴板（支持 Excel 和 WPS） ;Ctrl + C 将单元格标记为复制状态并将内容复制到剪贴板（支持 Excel 和 WPS） ;Ctrl + V 将剪贴板的内容粘贴到指定区域中（支持 Excel 和 WPS） ; <template> <div> <vxe-table border show-overflow height="500" :column-config="columnConfig" :mouse-config="mouseConfig" :area-config="areaConfig" :edit-config="editConfig" :keyboard-config="keyboardConfig" :data="tableData"> <vxe-column type="seq" width="60"></vxe-column> <vxe-column field="name" title="Name" :edit-render="{ name: 'input' }"></vxe-column> <vxe-column field="role" title="Role" :edit-render="{ name: 'input' }"></vxe-column> <vxe-column field="sex" title="Sex" :edit-render="{ name: 'input' }"></vxe-column> <vxe-column field="num" title="Num" :edit-render="{ name: 'input' }"></vxe-column> <vxe-column field="age" title="Age" :edit-render="{ name: 'input' }"></vxe-column> <vxe-column field="address" title="Address" width="200" :edit-render="{ name: 'input' }"></vxe-column> </vxe-table> </div> </template> <script setup> import { ref, reactive } from 'vue' const tableData = ref([ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', num: 23, age: 28, address: 'Shengzhen' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', num: 23, age: 22, address: 'Guangzhou' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', num: 23, age: 32, address: 'Shanghai' }, { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', num: 456, age: 24, address: 'Shanghai' }, { id: 10005, name: 'Test5', role: 'Designer', sex: 'Women', num: 23, age: 42, address: 'Guangzhou' }, { id: 10006, name: 'Test6', role: 'Designer', sex: 'Man', num: 23, age: 38, address: 'Shengzhen' }, { id: 10007, name: 'Test7', role: 'Test', sex: 'Women', num: 100, age: 24, address: 'Shengzhen' }, { id: 10008, name: 'Test8', role: 'PM', sex: 'Man', num: 345, age: 34, address: 'Shanghai' }, { id: 10009, name: 'Test9', role: 'Designer', sex: 'Man', num: 67, age: 52, address: 'Shanghai' }, { id: 10010, name: 'Test10', role: 'Test', sex: 'Women', num: 23, age: 44, address: 'Guangzhou' }, { id: 10011, name: 'Test11', role: 'Designer', sex: 'Man', num: 56, age: 52, address: 'Shanghai' }, { id: 10012, name: 'Test12', role: 'Test', sex: 'Women', num: 23, age: 16, address: 'Guangzhou' }, { id: 10013, name: 'Test13', role: 'Test', sex: 'Women', num: 38, age: 16, address: 'Shanghai' }, { id: 10014, name: 'Test14', role: 'Test', sex: 'Man', num: 37, age: 16, address: 'Shengzhen' }, { id: 10015, name: 'Test15', role: 'Test', sex: 'Women', num: 23, age: 16, address: 'Shengzhen' }, { id: 10016, name: 'Test16', role: 'Test', sex: 'Women', num: 58, age: 16, address: 'Guangzhou' }, { id: 10017, name: 'Test17', role: 'Test', sex: 'Man', num: 23, age: 16, address: 'Shanghai' }, { id: 10018, name: 'Test18', role: 'Test', sex: 'Women', num: 52, age: 16, address: 'Shengzhen' }, { id: 10019, name: 'Test19', role: 'Test', sex: 'Man', num: 37, age: 16, address: 'Guangzhou' }, { id: 10020, name: 'Test20', role: 'Test', sex: 'Women', num: 23, age: 16, address: 'Shanghai' }, { id: 10021, name: 'Test21', role: 'Test', sex: 'Man', num: 56, age: 16, address: 'Shengzhen' }, { id: 10022, name: 'Test22', role: 'Test', sex: 'Women', num: 49, age: 16, address: 'Guangzhou' }, { id: 10023, name: 'Test23', role: 'Test', sex: 'Man', num: 48, age: 16, address: 'Shengzhen' } ]) const columnConfig = reactive({ resizable: true }) const mouseConfig = reactive({ area: true // 是否开启区域选取 }) const areaConfig = reactive({ multiple: true // 是否启用多区域选取功能 }) const editConfig = reactive({ mode: 'cell', trigger: 'dblclick' }) const keyboardConfig = reactive({ isClip: true, isEdit: true, isDel: true, isEsc: true // 是否开启Esc键关闭编辑功能 }) </script> 转载自https://www.cnblogs.com/qaz666/p/18560758

查找与替换，通过 keyboard-config.isFNR 启用,支持快捷键Ctrl + F 查找数据，全表或指定区域查找数据 ;Ctrl + H 替换数据，全表或指定区域替换数据 ;  <template> <div> <vxe-table border show-overflow height="500" :column-config="{resizable: true}" :mouse-config="{area: true}" :keyboard-config="{isFNR: true}" :data="tableData"> <vxe-column type="seq" width="60"></vxe-column> <vxe-column field="name" title="Name"></vxe-column> <vxe-column field="role" title="Role"></vxe-column> <vxe-column field="sex" title="Sex"></vxe-column> <vxe-column field="num" title="Num"></vxe-column> <vxe-column field="age" title="Age"></vxe-column> <vxe-column field="address" title="Address" width="300"></vxe-column> </vxe-table> </div> </template> <script setup> import { ref } from 'vue' const tableData = ref([ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', num: 23, age: 28, address: 'Shengzhen' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', num: 23, age: 22, address: 'Guangzhou' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', num: 23, age: 32, address: 'Shanghai' }, { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', num: 456, age: 24, address: 'Shanghai' }, { id: 10005, name: 'Test5', role: 'Designer', sex: 'Women', num: 23, age: 42, address: 'Guangzhou' }, { id: 10006, name: 'Test6', role: 'Designer', sex: 'Man', num: 23, age: 38, address: 'Shengzhen' }, { id: 10007, name: 'Test7', role: 'Test', sex: 'Women', num: 100, age: 24, address: 'Shengzhen' }, { id: 10008, name: 'Test8', role: 'PM', sex: 'Man', num: 345, age: 34, address: 'Shanghai' }, { id: 10009, name: 'Test9', role: 'Designer', sex: 'Man', num: 67, age: 52, address: 'Shanghai' }, { id: 10010, name: 'Test10', role: 'Test', sex: 'Women', num: 23, age: 44, address: 'Guangzhou' }, { id: 10011, name: 'Test11', role: 'Designer', sex: 'Man', num: 56, age: 52, address: 'Shanghai' }, { id: 10012, name: 'Test12', role: 'Test', sex: 'Women', num: 23, age: 16, address: 'Guangzhou' } ]) </script>转载自https://www.cnblogs.com/qaz666/p/18560751