Antd 树形穿梭框操作按钮高量问题

Question

<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>

点击完子节点选中不取消在点击父节点选中，取消父节点选中取消操作按钮仍然常量

Answer 1

贴下代码？
官方demo:https://ant.design/components...