最近项目中运动用到了transfer,而且还和tree一起运用,真的是头大,不过还好,最终还是解决了。
ant-design-vue文档里都有,我只粘贴部分代码--------
<a-transfer
class="tree-transfer"
:data-source="dataSource"
:target-keys="targetKeys"//重要的部分
:render="item => item.title"
:show-select-all="false"
@change="onChange"
>
<template
slot="children"
slot-scope="{
props: { direction, selectedKeys },
on: { itemSelect },
}"
>
//没有了checkStrictly,父级和子级就有关联了
<a-tree
v-if="direction === 'left'"
blockNode
checkable
defaultExpandAll
:replace-fields="replaceFields"//自定义设置字段
:checkedKeys="[...selectedKeys, ...targetKeys]"
:treeData="treeData"//树的数据
@check="(_, props) => {onChecked(_, props, [...selectedKeys, ...targetKeys],itemSelect)}"
@select="(_, props) => {onChecked(_, props, [...selectedKeys, ...targetKeys],itemSelect)}"
/>
</template>
Transfer 中,dataSource里的数据值需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识
对于后端返回的数据,没有key和title的数据,该怎么解决?
replaceFields
这个属性去设置,你想要的字段。在data
中
replaceFields: {
key: "id",
title: "label"
},
而穿梭框dataSource
的数据是来自transferDataSource
,所以就可以
function flatten(list = []) {
if (list) {
list.forEach(item => {
transferDataSource.push({
key: item.id,
title: item.label
});
flatten(item.children);
});
}
}
对于穿梭的问题
direction
这个属性是起到了一定的作用了,穿梭是@change="onChange"
这个事件完成的,因此要知道targetKeys
,它的作用是啥?所以在这个函数里。
onChecked(_, e, checkedKeys, itemSelect){
//_这个下划线,就是你勾的key值,全选时,它就是所有的key值,当然看你的需求
this.totalChecked=_;//所以初始化一个状态赋值
const { eventKey } = e.node
itemSelect(eventKey, isChecked(this.totalChecked, eventKey));
}
//当然少不了direction
onChange(targetKeys,direction) {
this.targetKeys = targetKeys;//如果仅仅这样写是穿梭不到右边的,所以
if(direction=='right'){
this.targetKeys=this.totalChecked
//如果你还要有其他需求,在里面可以再判断
}
// 但是,想要穿梭到左边来,得这样写
if(direction=='left'){
this.targetKeys=targetKeys
}
},
这个穿梭的功能就大概的实现了,里面的一些细节还要注意下…