背景:
为了可以让antd-vue 穿梭框能够把异步的树形图,发现异步树能正常的使用该组件,搜索全网发现全网找不到案例,研究一天搞定了。
代码:
<template>
<div >
<!-- transfer -->
<div>
<a-transfer
class="tree-transfer"
:data-source="dataSource"
:target-keys="targetKeys"
:render="item => item.title"
@change="transferchange"
show-search
:list-style="{
width: '510px',
height: '528px',
}"
:show-select-all="false"
>
<template
slot="children"
slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect } }"
>
<a-tree
v-if="direction === 'left'"
:load-data="onLoadData" blockNode checkable checkStrictly :tree-data="treeData" :checkedKeys="[...selectedKeys, ...targetKeys]"
@check=" (_, props) => {
onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect);
}
"
@select="
(_, props) => {
onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect);
}"
>
</a-tree>
</template>
</a-transfer>
</div>
</div>
</template>
<script>
const treeData = [
{
title: 'parent 1',
key: '0-0',
slots: {
icon: 'smile',
},
selectable:false,
children: [
{ title: 'leaf1' , key: '0-0-0', slots: { icon: 'meh' }, children:[{ title: 'leaf12', key: '0-0-11', scopedSlots: { icon: 'custom' } }] },
{ title: 'leaf2', key: '0-0-1', scopedSlots: { icon: 'custom' } ,checked:true},
{ title: 'leaf3', key: '0-0-3', scopedSlots: { icon: 'custom' } },
],
testdatatestdata:['0-0-1', '0-0-3']
},
];
let transferDataSource = [];
function flatten(list = []) {
list.forEach(item => {
transferDataSource.push(item);
flatten(item.children);
});
}
flatten(JSON.parse(JSON.stringify(treeData)));
function isChecked(selectedKeys, eventKey) {
return selectedKeys.indexOf(eventKey) !== -1;
}
function handleTreeData(data, targetKeys = []) {
data.forEach(item => {
item['disabled'] = targetKeys.includes(item.key);
if (item.children) {
handleTreeData(item.children, targetKeys);
}
});
return data;
}
export default {
name: "rx-user",
data() {
return {
curval:"",
curUser:{},
targetKeys: [],
dataSource: transferDataSource,
treeData,
treeData1:treeData
}
},
created() {
this.curval=this.value;
},
methods: {
transferchange(targetKeys, direction, moveKeys){
console.log('transferchange',targetKeys,direction,moveKeys);
this.targetKeys = targetKeys;
console.log('this.testdata',this.testdata);
},
onLoadData(treeNode) {
return new Promise(resolve => {
if (treeNode.dataRef.children) {
resolve();
return;
}
// 模拟接口加载
setTimeout(() => {
treeNode.dataRef.children = [
{ title: `${treeNode.eventKey}-0`, key: `${treeNode.eventKey}-0` ,scopedSlots: { icon: 'custom' }},
{ title: `${treeNode.eventKey}-1`, key: `${treeNode.eventKey}-1` ,isLeaf:true,scopedSlots: { icon: 'custom' }},
];
this.treeData = [...this.treeData];
// 更新穿梭框原数据
// 修复穿梭宽带disabled的问题
this.dataSource = [...this.dataSource ,...JSON.parse(JSON.stringify(treeNode.dataRef.children).replaceAll('disabled: true,','').replaceAll('disabled: true',''))];
resolve();
}, 1000);
});
},
callback(){},
onSelect(selectedKeys, info) {
console.log('selected', selectedKeys, info);
},
onChange(targetKeys) {
console.log('Target Keys:', targetKeys);
this.targetKeys = targetKeys;
console.log('this.testdata',this.testdata);
},
onChecked(_, e, checkedKeys, itemSelect) {
// 增加如果是不是叶节点,就不让选中-配置下面注释的代码,
// if(!e.node.dataRef.isLeaf){
// return;
//}
console.log('onChecked _ treeData',this.treeData)
console.log('onChecked _',_);
console.log('onChecked e',e);
console.log('onChecked checkedKeys',checkedKeys);
console.log('onChecked itemSelect',itemSelect);
if(e.node.dataRef.test){
return;
}
const { eventKey } = e.node;
itemSelect(eventKey, !isChecked(checkedKeys, eventKey));
},
},
}
</script>
<style scoped>
/* 开启css样式的话,可以控制只能叶节点能被选择*/
/* .tree-transfer /deep/ .ant-tree-switcher + .ant-tree-checkbox{
display:none;
}
.tree-transfer /deep/ .ant-tree-switcher.ant-tree-switcher-noop + .ant-tree-checkbox{
display:inline-block!important;
} */
</style>
上面代码是所有节点都能选中的,我实际是公司组织人员选择需要使用,所以只能选择叶节点的,
js和css部分就是要上面代码注释的
<style scoped>
.tree-transfer /deep/ .ant-tree-switcher + .ant-tree-checkbox{
display:none;
}
.tree-transfer /deep/ .ant-tree-switcher.ant-tree-switcher-noop + .ant-tree-checkbox{
display:inline-block!important;
}
</style>
onChecked(_, e, checkedKeys, itemSelect) {
// 增加如果是不是叶节点,就不让选中,
if(!e.node.dataRef.isLeaf){
return;
}
console.log('onChecked _ treeData',this.treeData)
console.log('onChecked _',_);
console.log('onChecked e',e);
console.log('onChecked checkedKeys',checkedKeys);
console.log('onChecked itemSelect',itemSelect);
const { eventKey } = e.node;
itemSelect(eventKey, !isChecked(checkedKeys, eventKey));
},
最终结果:
哈哈哈,完美^-^ ,有问题点赞关注,免费解答