Antd 树形穿梭框操作按钮高量问题
<template> <a-transfer
class="tree-transfer"
:data-source="dataSource"
:target-keys="targetKeys"
:render="(item) => item.title"
:show-select-all="false"
@change="onChange"
:listStyle="listStyle"
:titles="['可选择属性', '已选择属性']"
>
<template
slot="children"
slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect } }"
>
<template v-if="direction === 'left'">
<el-input
style="width: 100%"
placeholder="请输入内容"
v-model="inputValue"
prefix-icon="el-icon-search"
@change="onChangeInput()"
clearable
>
</el-input>
<a-tree
v-if="leftTreeData.length"
style="margin-top: 10px"
blockNode
checkable
:key="leftTreeDatakey"
:replace-fields="replaceFields"
:tree-data="leftTreeData"
:checked-keys="leftCheckedKey"
@check="
(_, props) => {
handleLeftChecked(
_,
props,
[...selectedKeys, ...targetKeys],
itemSelect
);
}
"
/>
<a-empty v-else>
<template #description>暂无数据</template>
</a-empty>
</template>
<template v-else-if="direction === 'right'">
<el-input
style="width: 100%"
placeholder="请输入内容"
v-model="inputValueRight"
prefix-icon="el-icon-search"
@change="onChangeInputRight()"
clearable
>
</el-input>
<a-tree
v-if="rightTreeData.length"
blockNode
checkable
:key="rightTreeDatakey"
:replace-fields="replaceFields"
:tree-data="rightTreeData"
v-model:checked-keys="rightCheckedKey"
v-model:expanded-keys="rightExpandedKey"
:defaultExpandAll="defaultExpandAll"
@check="
(_, props) => {
handleRightChecked(
_,
props,
[...selectedKeys, ...targetKeys],
itemSelect
);
}
"
/>
<a-empty v-else>
<!-- <div class="lodingIcon" :style="{'display':_display}">
<a-spin tip="Loading...">
<a-icon
slot="indicator"
type="loading"
style="font-size: 24px"
spin
/>
</a-spin>
</div> -->
<template #description> 暂无数据</template>
</a-empty>
</template>
</template>
</a-transfer>
</template>
<script>
import {
cloneDeep,
flatten,
getDeepList,
getTreeKeys,
handleLeftTreeData,
handleRightTreeData,
isChecked,
uniqueTree,
} from "./index";
export default {
name: "OptionsTransfer",
props: {
/** 树数据 */
treeData: {
type: Array,
default: () => [],
},
/** 编辑 key */
editKey: {
type: Array,
default: () => [],
},
_display:{
type:String,
default:''
}
},
mounted() {
},
data() {
return {
rightTreeDatakey: '123',
leftTreeDatakey: '333',
defaultExpandAll: true,
inputValue: '',
inputValueRight: '',
replaceFields: {
// id:'templateId',
children: 'child',
title: 'name',
parentId: 'pid',
},
listStyle: {
width: '350px',
height: '320px',
overflowY: 'auto',
display: 'block',
},
leftTreeAllData: [],
rightTreeAllData: [],
targetKeys: [], // 显示在右侧框数据的 key 集合
dataSource: [], // 数据源，其中的数据将会被渲染到左边一栏
leftCheckedKey: [], // 左侧树选中 key 集合
leftHalfCheckedKeys: [], // 左侧半选集合
leftCheckedAllKey: [], // 左侧树选中的 key 集合，包括半选与全选
leftTreeData: [], // 左侧树
rightCheckedKey: [], // 右侧树选中集合
rightCheckedAllKey: [], // 右侧树选中集合，包括半选与全选
rightExpandedKey: [], // 右侧展开数集合
rightTreeData: [], // 右侧树
emitKeys: [], // 往父级组件传递的数据
deepList: [], // 深层列表
};
},
watch: {
treeData: {
deep: true,
handler(val) {
// console.log("123123");
this.processTreeData();
},
},
editKey: {
deep: true,
handler(val) {
this.processTreeData();
},
},
},
created() {
this.processTreeData();
},
computed: {
},
methods: {
// 处理树数据
processTreeData() {
this.dataSource = []
flatten(cloneDeep(this.treeData), this.dataSource);
// console.log('数据源',this.dataSource);
if (this.editKey.length) {
this.processEditData();
} else {
this.leftTreeData = handleLeftTreeData(
cloneDeep(this.treeData),
this.leftCheckedKey
);
this.leftTreeAllData = this.leftTreeData
}
},
// 处理编辑数据
processEditData() {
this.leftCheckedAllKey = this.editKey;
this.rightExpandedKey = this.editKey;
this.targetKeys = this.editKey;
this.rightTreeData = handleRightTreeData(
cloneDeep(this.treeData),
this.editKey
);
// console.log('this.rightTreeData', this.rightTreeData);
getDeepList(this.deepList, this.treeData);
this.leftCheckedKey = uniqueTree(this.editKey, this.deepList);
this.leftHalfCheckedKeys = this.leftCheckedAllKey.filter(
(item) => this.leftCheckedKey.indexOf(item) === -1
);
this.leftTreeData = handleLeftTreeData(
cloneDeep(this.treeData),
this.leftCheckedKey
);
this.emitKeys = this.rightExpandedKey;
},
// 穿梭更改
onChange(targetKeys, direction, moveKeys) {
// console.log('targeKeys',targetKeys);
if (direction === "right") {
this.targetKeys = this.leftCheckedAllKey;
console.log('this.targetKeys', this.targetKeys);
this.rightCheckedKey = [];
this.rightTreeData = handleRightTreeData(
cloneDeep(this.treeData),
this.leftCheckedAllKey,
"right"
);
console.log('rightTreeData', this.rightTreeData);
this.rightTreeAllData = this.rightTreeData
console.log('+++++ +++', this.leftCheckedKey);
if (this.leftCheckedKey.length == 0) {
this.targetKeys = []
this.leftCheckedAllKey = []
this.rightTreeData = []
}
console.log('aaa', this.targetKeys);
// console.log(this.leftTreeData, "左边1");
console.log(this.leftCheckedAllKey, "左边");
console.log('leftCheckedKey', this.leftCheckedKey);
this.leftTreeData = handleLeftTreeData(
cloneDeep(this.treeData),
this.leftCheckedKey,
"right"
);
this.rightTreeDatakey = Date.now().valueOf()
// console.log(this.leftTreeData, "左边2");
} else if (direction === "left") {
this.digui(this.rightTreeAllData, this.rightCheckedKey)
this.rightTreeData = handleRightTreeData(
this.rightTreeData,
this.rightCheckedKey,
"left"
);
this.leftTreeData = handleLeftTreeData(
this.leftTreeData,
this.rightCheckedKey,
"left"
);
this.leftCheckedKey = this.leftCheckedKey.filter(
(item) => this.rightCheckedKey.indexOf(item) === -1
);
this.targetKeys = this.targetKeys.filter(
(item) => this.rightCheckedKey.indexOf(item) === -1
);
this.leftHalfCheckedKeys = this.leftHalfCheckedKeys.filter(
(item) => this.rightCheckedKey.indexOf(item) === -1
);
this.rightCheckedKey = [];
}
// console.log('this,rightChe99++', this.defaultExpandAll);
this.rightExpandedKey = [];
// this.rightExpandedKey=getTreeKeys(this.rightTreeData)
this.emitKeys = this.rightExpandedKey;
},
onChangeInput() {
this.leftTreeData = this.fuzzyMatching(this.leftTreeAllData, this.inputValue)
},
digui(data, dataId) {
if (data != null && data.length > 0) {
for (var i = 0; i < data.length; i++) {
if (dataId.indexOf(data[i].key) != -1) {
data.splice(i, 1)
continue
}
if (data[i].child != null && data[i].child.length > 0) {
this.digui(data[i].child, dataId)
}
}
}
},
fuzzyMatching(data, value) {
if (value === '') {
let abs = []
this.leftCheckedKey.forEach(item => {
console.log('item', item);
this.dataSource.forEach(el => {
if (item == el.key) {
if (el.child == null || el.child.length < 0) {
abs.push(el.key)
}
}
})
})
this.leftCheckedKey = [...abs]
return data
}
let tempData = [];
if (data !== null && data.length > 0) {
for (let i = 0; i < data.length; i++) {
let have = false;
let obj = { ...data[i] };
if (obj.name.indexOf(value) !== -1) {
have = true;
}
let child = this.fuzzyMatching(obj.child, value)
if (child !== null && child.length > 0) {
have = true;
}
obj.child = child
if (have) {
tempData.push(obj)
}
}
}
return tempData
},
onChangeInputRight() {
// console.log('rightTreeAllData', this.rightTreeAllData);
// console.log('rightTreeData', this.rightTreeData);
this.rightTreeData = this.fuzzyMatchingRight(this.rightTreeAllData, this.inputValueRight)
// console.log('rightTreeData999', this.rightTreeData);
},
fuzzyMatchingRight(data, value) {
if (value === '') {
let allGroup = [], allkey = [], allPath = [], arrani = [], arrRightKey = []
// console.log('this.leftCheckedKey', this.leftCheckedKey);
this.leftCheckedKey.forEach(el => {
this.dataSource.forEach(item => {
if (el == item.key) {
allGroup.push(item)
}
})
})
allGroup.forEach(tel => {
let idPath = tel.idPath.split('/')
idPath.shift()
idPath.pop()
allkey.push(...idPath)
})
allPath = Array.from(new Set(allkey))
allPath.forEach(absEl => {
this.dataSource.forEach(ele => {
if (absEl == ele.templateId && ele.child) {
arrani.push(ele.key)
let kui = Array.from(new Set(arrani))
arrRightKey = [...kui, ...this.leftCheckedKey]
}
})
})
this.rightTreeData = handleRightTreeData(
cloneDeep(this.treeData),
arrRightKey,
'right'
)
return this.rightTreeData
}
let tempData = [];
if (data !== null && data !== undefined && data.length > 0) {
for (let i = 0; i < data.length; i++) {
let have = false;
let obj = { ...data[i] };
if (obj.name.indexOf(value) !== -1) {
have = true;
}
let child = this.fuzzyMatchingRight(obj.child, value)
if (child !== null && child.length > 0) {
have = true;
}
obj.child = child
if (have) {
tempData.push(obj)
// console.log('tempData', tempData);
}
}
}
return tempData
},
// 左侧选择
// 左侧选择
handleLeftChecked(_, { node, halfCheckedKeys }, checkedKeys, itemSelect) {
this.leftCheckedKey = _;
this.leftHalfCheckedKeys = [
...new Set([...this.leftHalfCheckedKeys, ...halfCheckedKeys]),
];
this.leftCheckedAllKey = [
...new Set([...this.leftHalfCheckedKeys, ...halfCheckedKeys, ..._]),
];
const { eventKey } = node;
console.log('this.leftCheckedKey', this.leftCheckedKey);
console.log('checkedKeys', checkedKeys);
itemSelect(eventKey, !isChecked(checkedKeys, eventKey));
},
// 右侧选择
handleRightChecked(_, { node, halfCheckedKeys }, checkedKeys, itemSelect) {
console.log('_+9+9+', _);
this.rightCheckedKey = _;
this.rightCheckedAllKey = [...halfCheckedKeys, ..._];
const { eventKey } = node;
itemSelect(eventKey, isChecked(_, eventKey));
},
},
};
</script>
<style lang="scss">
.ant-transfer-list {
width: 800px;
}
.lodingIcon {
position: absolute;
bottom: 125px;
left: 144px;
}
.ant-empty-image {
svg {
//display: none;
}
}
.tree-transfer {
div.ant-transfer-list-header {
height: 39px;
span.ant-transfer-list-header-selected span:first-child {
display: none;
}
span.ant-transfer-list-header-selected span:last-child {
right: 0px;
left: 12px;
}
}
}
</style>
点击完子节点选中不取消在点击父节点选中，取消父节点选中取消操作按钮仍然常量
回答：
贴下代码？
官方demo:https://ant.design/components...
以上是 Antd 树形穿梭框操作按钮高量问题 的全部内容， 来源链接： utcz.com/p/937386.html
