实现两个table相互拖拽排序可以使用
ant-
design-
vue的`<a-
transfer>`
组件。具体实现步骤如下：
1. 使用`<a-
transfer>`
组件分别渲染两个table，设置`:data-source`和`:target-keys`属性。
```
<a-
transfer
:data-source="leftTableData"
:target-keys="leftSelectedKeys"
:render="item => item.title"
:operations="['>', '<']"
:list-style="{'width': '200px'}"
></a-
transfer>
<a-
transfer
:data-source="rightTableData"
:target-keys="rightSelectedKeys"
:render="item => item.title"
:operations="['>', '<']"
:list-style="{'width': '200px'}"
></a-
transfer>
```
2. 监听`change`事件，实现数据的拖拽操作。
```
<a-
transfer
:data-source="leftTableData"
:target-keys="leftSelectedKeys"
:render="item => item.title"
:operations="['>', '<']"
:list-style="{'width': '200px'}"
@change="handle
TransferChange"
></a-
transfer>
<a-
transfer
:data-source="rightTableData"
:target-keys="rightSelectedKeys"
:render="item => item.title"
:operations="['>', '<']"
:list-style="{'width': '200px'}"
@change="handle
TransferChange"
></a-
transfer>
```
```
methods: {
handle
TransferChange (nextTargetKeys, direction, moveKeys) {
const { leftTableData, rightTableData } = this
if (direction === 'right') {
const moveData = leftTableData.filter(item => moveKeys.includes(item.key))
this.rightTableData = rightTableData.concat(moveData)
this.leftTableData = leftTableData.filter(item => !moveKeys.includes(item.key))
} else if (direction === 'left') {
const moveData = rightTableData.filter(item => moveKeys.includes(item.key))
this.leftTableData = leftTableData.concat(moveData)
this.rightTableData = rightTableData.filter(item => !moveKeys.includes(item.key))
}
}
}
```
3. 根据需要
自定义样式和数据源。
完整代码示例：
```
<template>
<div>
<a-
transfer
:data-source="leftTableData"
:target-keys="leftSelectedKeys"
:render="item => item.title"
:operations="['>', '<']"
:list-style="{'width': '200px'}"
@change="handle
TransferChange"
></a-
transfer>
<a-
transfer
:data-source="rightTableData"
:target-keys="rightSelectedKeys"
:render="item => item.title"
:operations="['>', '<']"
:list-style="{'width': '200px'}"
@change="handle
TransferChange"
></a-
transfer>
</div>
</template>
<script>
export default {
data () {
return {
leftTableData: [
{ key: '1', title: '项目1' },
{ key: '2', title: '项目2' },
{ key: '3', title: '项目3' },
{ key: '4', title: '项目4' }
],
rightTableData: [
{ key: '5', title: '项目5' },
{ key: '6', title: '项目6' },
{ key: '7', title: '项目7' },
{ key: '8', title: '项目8' }
],
leftSelectedKeys: [],
rightSelectedKeys: []
}
},
methods: {
handle
TransferChange (nextTargetKeys, direction, moveKeys) {
const { leftTableData, rightTableData } = this
if (direction === 'right') {
const moveData = leftTableData.filter(item => moveKeys.includes(item.key))
this.rightTableData = rightTableData.concat(moveData)
this.leftTableData = leftTableData.filter(item => !moveKeys.includes(item.key))
} else if (direction === 'left') {
const moveData = rightTableData.filter(item => moveKeys.includes(item.key))
this.leftTableData = leftTableData.concat(moveData)
this.rightTableData = rightTableData.filter(item => !moveKeys.includes(item.key))
}
}
}
}
</script>
```
11万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
