element tree 单选

element el-tree 实现单选

template部分：

<el-tree
              v-if="dialogFormVisible"
              ref="tree"
              node-key="id"
              :data="deptsList"
              default-expand-all
              :props="defaultProps"
              highlight-current
              :default-checked-keys="deptsId"
              check-strictly
              show-checkbox
              @check-change="deptCheckChange"
            />

js

// check-change
// 节点选中状态发生变化时的回调
// 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
    deptCheckChange(data, checked, indeterminate) {
      console.log(data, '数据')
      console.log(checked, '选中状态')
      console.log(indeterminate, '子树中选中状态')
      // 获取当前选择的id在数组中的索引
      const indexs = this.selectDept.deptId.indexOf(data.id)
      // 如果不存在数组中，并且数组中已经有一个id并且checked为true的时候，代表不能再次选择。
      if (indexs < 0 && this.selectDept.deptId.length === 1 && checked) {
        console.log('only one')
        this.$message({
         message: '只能选择一个部门！',
          type: 'warning',
          showClose: true
        })
        // 设置已选择的节点为false 很重要
        this.$refs.tree.setChecked(data, false)
      } else if (this.selectDept.deptId.length === 0 && checked) {
        // 发现数组为空 并且是已选择
        // 防止数组有值，首先清空，再push
        this.selectDept.deptId = []
        this.selectDept.deptId.push(data.id)
      } else if (indexs >= 0 && this.selectDept.deptId.length === 1 && !checked) {
        // 再次直接进行赋值为空操作
        this.selectDept.deptId = []
      }
      this.temp.pid = this.selectDept.deptId[0]
    },

实现效果：

重点：

上述以前用的方法太笨重，且不好操作，更新现在的方法

<template>
<el-tree
                ref="tree1"
                node-key="id"
                :data="deptsList"
                default-expand-all
                show-checkbox
                check-strictly
                :props="defaultProps"
                :expand-on-click-node="false"
                highlight-current
                :filter-node-method="filterNode"
                @check="deptNodeClick"
              />
</template>

<script>部分：

deptNodeClick(data) {
      this.$refs.tree1.setCheckedNodes([{
        id: data.id,
        label: data.name
      }])
      this.deptsValue = [data]
      this.deptName = data.name
      this.listQuery.deptId = data.id
    },

setCheckedNodes只给check一个值。多简洁的操作，之前写那么大堆！！