弹指一挥间，轻松搞定父子节点独立选中问题！--Element UI Tree

2023-10-11 05:48:56

element el-tree复选框父子节点不关联实现联动回显#

前言

Element UI Tree组件是一个功能强大的组件，它可以用来创建树形结构的数据展示。Tree组件支持复选框，这使得它可以用来选择树中的节点。在实际业务开发中，我们可能会遇到一些特殊需求，如点击父节点全选时需要跳过某些子节点不需要选中，让用户自己手动勾选的情况，或者其他需要自定义选中逻辑的需求。

实现思路

要实现父子节点不关联的联动回显，我们需要对Element UI Tree组件进行一些修改。首先，我们需要创建一个自定义的组件，该组件将负责处理父子节点的选中逻辑。然后，我们需要将该组件集成到Element UI Tree组件中。

代码实现

首先，我们需要创建一个自定义的组件，该组件将负责处理父子节点的选中逻辑。我们可以将该组件命名为CustomTree。CustomTree组件的代码如下：

import { Component, Vue } from 'vue';

export default {
  name: 'CustomTree',
  props: {
    data: {
      type: Array,
      required: true
    },
    value: {
      type: Array,
      required: true
    },
    父子节点互不影响逻辑
    checkStrictly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectedKeys: []
    };
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        this.selectedKeys = newVal;
      },
      deep: true
    }
  },
  methods: {
    handleNodeClick(data, checked) {
      if (this.checkStrictly) {
        this.selectedKeys = checked ? [data.id] : [];
      } else {
        const index = this.selectedKeys.indexOf(data.id);
        if (index > -1) {
          this.selectedKeys.splice(index, 1);
        } else {
          this.selectedKeys.push(data.id);
        }
      }
      this.$emit('input', this.selectedKeys);
    }
  },
  render() {
    return (
      <el-tree
        :data="data"
        :props="props"
        :value="selectedKeys"
        @node-click="handleNodeClick"
      />
    );
  }
};

然后，我们需要将CustomTree组件集成到Element UI Tree组件中。我们可以将CustomTree组件作为Element UI Tree组件的子组件。Element UI Tree组件的代码如下：

import { Component, Vue } from 'vue';
import CustomTree from './CustomTree.vue';

export default {
  name: 'ElTree',
  components: {
    CustomTree
  },
  props: {
    data: {
      type: Array,
      required: true
    },
    value: {
      type: Array,
      required: true
    },
    checkStrictly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectedKeys: []
    };
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        this.selectedKeys = newVal;
      },
      deep: true
    }
  },
  methods: {
    handleNodeClick(data, checked) {
      if (this.checkStrictly) {
        this.selectedKeys = checked ? [data.id] : [];
      } else {
        const index = this.selectedKeys.indexOf(data.id);
        if (index > -1) {
          this.selectedKeys.splice(index, 1);
        } else {
          this.selectedKeys.push(data.id);
        }
      }
      this.$emit('input', this.selectedKeys);
    }
  },
  render() {
    return (
      <CustomTree
        :data="data"
        :value="selectedKeys"
        :checkStrictly="checkStrictly"
        @input="handleNodeClick"
      />
    );
  }
};

使用示例

要使用CustomTree组件，我们需要在Vue文件中导入CustomTree组件，然后将其作为Element UI Tree组件的子组件。例如：

<template>
  <el-tree
    :data="data"
    :value="value"
    :checkStrictly="true"
  >
    <custom-tree
      :data="data"
      :value="value"
      :checkStrictly="true"
      @input="handleNodeClick"
    />
  </el-tree>
</template>

<script>
import { Component, Vue } from 'vue';
import ElTree from 'element-ui/lib/tree';
import CustomTree from './CustomTree.vue';

export default {
  name: 'App',
  components: {
    ElTree,
    CustomTree
  },
  data() {
    return {
      data: [
        {
          id: 1,
          label: 'Node 1',
          children: [
            {
              id: 2,
              label: 'Node 2'
            },
            {
              id: 3,
              label: 'Node 3'
            }
          ]
        },
        {
          id: 4,
          label: 'Node 4',
          children: [
            {
              id: 5,
              label: 'Node 5'
            },
            {
              id: 6,
              label: 'Node 6'
            }
          ]
        }
      ],
      value: []
    };
  },
  methods: {
    handleNodeClick(data, checked) {
      console.log(data, checked);
    }
  }
};
</script>