element ui el-tree 单选效果实现

踩坑

处理关闭原来已选项为关闭时也会触发checkChange，造成错误的效果

解决，感觉有点复杂

html

<el-tree
          ref="tree"
          node-key="id"
          class="custom-tree"
          :data="directoryTreeData"
          :props="defaultProps"
          show-checkbox
          :check-strictly="true"
          @check-change="handleCheckChange"
        >
        </el-tree>

tree data

const DIRECTORY_TREE_DATA = [
  {
    id: 1,
    label: '一级 1',
    children: [
      {
        id: 4,
        label: '二级 1-1',
        children: [
          {
            id: 9,
            label: '三级 1-1-1'
          },
          {
            id: 10,
            label: '三级 1-1-2'
          }
        ]
      }
    ]
  },
  {
    id: 2,
    label: '一级 2',
    children: [
      {
        id: 5,
        label: '二级 2-1'
      },
      {
        id: 6,
        label: '二级 2-2'
      }
    ]
  },
  {
    id: 3,
    label: '一级 3',
    children: [
      {
        id: 7,
        label: '二级 3-1'
      },
      {
        id: 8,
        label: '二级 3-2'
      }
    ]
  }
]

vue data

data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      directoryTreeData: DIRECTORY_TREE_DATA,
      selectTreeId: '',
      closeSelectTreeId: ''
    }
  },

vue methonds

  methods: {
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate)
      const nowKeyId = data.id
      console.log(checked)
      // 主动关闭之前的节点造成的触发
      if (nowKeyId === this.closeSelectTreeId) {
        this.closeSelectTreeId = ''
        // 不做操作
        return
      } else if (!checked) {
        this.selectTreeId = ''
        this.closeSelectTreeId = ''
        this.$refs.tree.setCheckedKeys([])
      } else {
        // 选中状态
        // 获取之前选中
        const selectTreeId = this.selectTreeId
        // 如果之前存在一个选中
        if (selectTreeId !== '') {
          // 标记为关闭节点，用于后面触发后判断
          this.closeSelectTreeId = selectTreeId
          this.$refs.tree.setChecked(selectTreeId, false)
        }
        // 设置当前选中
        this.selectTreeId = nowKeyId
      }
    }
}