网站速度诊断 慢,网络营销外包专家,网站平台建设投资费用清单,无锡网站设计公司电话vue 如何使用 vxe-table 来实现跨表拖拽#xff0c;多表联动互相拖拽数据
row-drag-config.isCrossTableDrag 启用跨表格、多表格互相拖拽#xff1b;跨表拖拽需要确保数据主键不重复#xff0c;通过 row-config.keyField 指定主键字段名
查看官网#xff1a;https://vxe…vue 如何使用 vxe-table 来实现跨表拖拽多表联动互相拖拽数据
row-drag-config.isCrossTableDrag 启用跨表格、多表格互相拖拽跨表拖拽需要确保数据主键不重复通过 row-config.keyField 指定主键字段名
查看官网https://vxetable.cn gitbubhttps://github.com/x-extends/vxe-table giteehttps://gitee.com/x-extends/vxe-table
效果
例如。页面上加载3个表格需求是实现跨表格直接可以互相拖拽
代码
多表格直接互相拖拽需要确保数据主键不重复通过 row-config.keyField 指定主键字段名
templatedivvxe-button statussuccess clickresultEvent1获取数据1/vxe-buttonvxe-grid refgridRef1 v-bindgridOptions1/vxe-gridvxe-button statussuccess clickresultEvent2获取数据2/vxe-buttonvxe-grid refgridRef2 v-bindgridOptions2/vxe-gridvxe-button statussuccess clickresultEvent3获取数据3/vxe-buttonvxe-grid refgridRef3 v-bindgridOptions3/vxe-grid/div
/templatescript setup
import { ref, reactive } from vue
import { VxeUI } from vxe-pc-uiconst gridRef1 ref()
const gridOptions1 reactive({border: true,height: 240,rowConfig: {drag: true,keyField: id},rowDragConfig: {isCrossTableDrag: true // 允许跨表},columns: [{ field: name, title: Name },{ field: role, title: Role, dragSort: true },{ field: sex, title: Sex },{ field: age, title: Age },{ field: address, title: Address }],data: [{ id: 10001, name: Test11, role: Develop, sex: Man, age: 28, address: test abc },{ id: 10002, name: Test12, role: Test, sex: Women, age: 22, address: Guangzhou },{ id: 10003, name: Test13, role: PM, sex: Man, age: 32, address: Shanghai },{ id: 10004, name: Test14, role: Test, sex: Women, age: 48, address: Guangzhou },{ id: 10005, name: Test15, role: PM, sex: Man, age: 38, address: Shanghai },{ id: 10006, name: Test16, role: Develop, sex: Man, age: 42, address: Guangzhou }]
})
const resultEvent1 () {const $grid gridRef1.valueif ($grid) {const { insertRecords, removeRecords } $grid.getRecordset()const tableData $grid.getFullData()VxeUI.modal.message({content: 新增${insertRecords.length} 删除${removeRecords.length} 现有${tableData.length},status: success})}
}const gridRef2 ref()
const gridOptions2 reactive({border: true,height: 240,rowConfig: {drag: true,keyField: id},rowDragConfig: {isCrossTableDrag: true // 允许跨表},columns: [{ field: name, title: Name },{ field: role, title: Role, dragSort: true },{ field: sex, title: Sex },{ field: age, title: Age },{ field: address, title: Address }],data: [{ id: 20001, name: Test21, role: Develop, sex: Man, age: 28, address: test abc },{ id: 20002, name: Test22, role: Test, sex: Women, age: 22, address: Guangzhou },{ id: 20003, name: Test23, role: PM, sex: Man, age: 32, address: Shanghai },{ id: 20004, name: Test24, role: Test, sex: Women, age: 48, address: Guangzhou },{ id: 20005, name: Test25, role: PM, sex: Man, age: 38, address: Shanghai },{ id: 20006, name: Test26, role: Develop, sex: Man, age: 42, address: Guangzhou }]
})
const resultEvent2 () {const $grid gridRef2.valueif ($grid) {const { insertRecords, removeRecords } $grid.getRecordset()const tableData $grid.getFullData()VxeUI.modal.message({content: 新增${insertRecords.length} 删除${removeRecords.length} 现有${tableData.length},status: success})}
}const gridRef3 ref()
const gridOptions3 reactive({border: true,height: 240,rowConfig: {drag: true,keyField: id},rowDragConfig: {isCrossTableDrag: true // 允许跨表},columns: [{ field: name, title: Name },{ field: role, title: Role, dragSort: true },{ field: sex, title: Sex },{ field: age, title: Age },{ field: address, title: Address }],data: [{ id: 30001, name: Test31, role: Develop, sex: Man, age: 28, address: test abc },{ id: 30002, name: Test32, role: Test, sex: Women, age: 22, address: Guangzhou },{ id: 30003, name: Test33, role: PM, sex: Man, age: 32, address: Shanghai },{ id: 30004, name: Test34, role: Test, sex: Women, age: 48, address: Guangzhou },{ id: 30005, name: Test35, role: PM, sex: Man, age: 38, address: Shanghai },{ id: 30006, name: Test36, role: Develop, sex: Man, age: 42, address: Guangzhou }]
})
const resultEvent3 () {const $grid gridRef3.valueif ($grid) {const { insertRecords, removeRecords } $grid.getRecordset()const tableData $grid.getFullData()VxeUI.modal.message({content: 新增${insertRecords.length} 删除${removeRecords.length} 现有${tableData.length},status: success})}
}
/scripthttps://gitee.com/x-extends/vxe-table
