antd——tree组件实现单选功能——基础积累

文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能，也就是tree组件。如下：

<a-tree
    v-model="checkedKeys"
    checkable
    :expanded-keys="expandedKeys"
    :auto-expand-parent="autoExpandParent"
    :selected-keys="selectedKeys"
    :tree-data="treeData"
    @expand="onExpand"
    @select="onSelect"
  />

上面代码中的checkable可以实现树形控件的选择功能。

现在需求如下：需要实现单选功能。

需求1：选择父级，子级自动勾选

需求2：可单独勾选子级

需求3：同一级别的只能选择一个

解决步骤1：html代码

<a-tree
  v-model="checkedKeys"
  checkable
  :auto-expand-parent="autoExpandParent"
  :tree-data="treeData"
  :replaceFields="replaceFields"
  @check="onCheck"
/>

解决步骤2：script代码

data() {
    return {
      autoExpandParent: true,
      checkedKeys: [],
      treeData: null,
      replaceFields: {
        children: 'children',
        title: 'displayName',
        key: 'id',
        value: 'id',
      },
    };
  },
  watch: {
    value: {
      handler(val) {
        this.checkedKeys = val;
      },
      deep: true,
    },
    checkedKeys(val) {
      this.$emit('input', val);
    },
  },
  created() {
    this.getOrgs();
  },
  methods: {
    onCheck(val, e) {
      if (e.node.checked) {
        this.checkedKeys = [];
      } else {
        this.checkedKeys = [e.node.eventKey];
      }
    },
    getOrgs() {
      getOrganizationsAll().then((data) => {
        if (data.success) {
          let res = data.result;
          this.treeData = res || [];
        }
      });
    },
  },

因为我这个是一个组件，value是父级页面传递给当前组件的值，$emit('input',val)是当前组件更改后更新父级页面的方法。可忽略。

解决步骤3：重要的代码——onCheck

onCheck(val, e) {
  if (e.node.checked) {
    this.checkedKeys = [];
  } else {
    this.checkedKeys = [e.node.eventKey];
  }
},

通过获取e.node.eventKey，可以获取到当前点击的节点的key，然后将这个key赋值给v-model双向绑定的值，即可保证每次只有一个值选中。而且没有取消父级和子级的关联，因此需求1和需求2都是可以实现的了。

完成！！！多多积累，多多收获！！！