VUE实现el-tree左边勾选右边清除交互

引言

在前端开发中，树形结构是一种常见的组件，它可以帮助我们组织和展示层级数据。ElementUI的el-tree组件是一个功能强大的树形结构组件，它提供了丰富的API和配置选项。

实现思路

要实现el-tree左边勾选右边清除交互，我们需要：

1. 在el-tree中启用checkbox功能
2. 监听checkbox的勾选事件
3. 在勾选事件中清除右边已选中的节点

代码实现

首先，我们需要在el-tree组件中启用checkbox功能：

<el-tree :data="data" :props="defaultProps" :show-checkbox="true"></el-tree>

接下来，我们需要监听checkbox的勾选事件：

methods: {
  onCheckChange(data, checked, indeterminate) {
    // 处理勾选事件
  }
}

在勾选事件中，我们可以通过递归的方式清除右边已选中的节点：

onCheckChange(data, checked, indeterminate) {
  const treeData = this.$refs.tree.data;
  const selectedKeys = [];

  const clearChecked = (node) => {
    node.checked = false;
    node.indeterminate = false;
    if (node.children) {
      node.children.forEach(child => clearChecked(child));
    }
  };

  if (checked) {
    selectedKeys.push(data.key);
  } else if (indeterminate) {
    // 部分选中时，清除已选中的子节点
    if (data.children) {
      data.children.forEach(child => clearChecked(child));
    }
  } else {
    // 取消选中时，清除所有已选中的节点
    treeData.forEach(child => clearChecked(child));
  }

  this.$refs.tree.setCheckedKeys(selectedKeys);
}

完整代码示例

<template>
  <el-tree :data="data" :props="defaultProps" :show-checkbox="true" ref="tree"></el-tree>
</template>

<script>
export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      data: [
        {
          label: '我的数据',
          children: [
            {
              label: '已选中的项',
              checked: true
            },
            {
              label: '未选中的项'
            }
          ]
        }
      ]
    };
  },
  methods: {
    onCheckChange(data, checked, indeterminate) {
      const treeData = this.$refs.tree.data;
      const selectedKeys = [];

      const clearChecked = (node) => {
        node.checked = false;
        node.indeterminate = false;
        if (node.children) {
          node.children.forEach(child => clearChecked(child));
        }
      };

      if (checked) {
        selectedKeys.push(data.key);
      } else if (indeterminate) {
        // 部分选中时，清除已选中的子节点
        if (data.children) {
          data.children.forEach(child => clearChecked(child));
        }
      } else {
        // 取消选中时，清除所有已选中的节点
        treeData.forEach(child => clearChecked(child));
      }

      this.$refs.tree.setCheckedKeys(selectedKeys);
    }
  }
};
</script>

总结

通过使用VUE和ElementUI，我们可以轻松实现el-tree左边勾选右边清除交互。这种交互可以增强用户体验，提高树形结构的可用性。