el-tree树结构设置选中值

 

背景：

　　项目最近开发中有个需求，两个el-tree来回切换时候，不管选中第几个，切回来时候都需要给它默认选中第一个，且数据也查询第一个的选中值。但是我使用常用的setCheckedKeys方法时候不起作用，研究后发现是用错了方法，setCheckedKeys是树结构多选情况下使用的，项目中是单选；

解决并总结：

• 解决

 　　如果tree机构是单选，选中值的方法为setCurrentKey，去给它选中和清空值操作！

•  总结

　　tree结构有单选和多选两种，他们的选中方法也不一样

           多选的选中方法为setCheckedKeys，贴一段代码看看：

<el-tree
  :data="data"
  show-checkbox
  default-expand-all
  node-key="id"
  ref="tree"
  highlight-current
  :props="defaultProps">
</el-tree>

<div class="buttons">
  <el-button @click="setCheckedKeys">通过 key 设置</el-button>
  <el-button @click="resetChecked">清空</el-button>
</div>

<script>
  export default {
    methods: {
       // 设置选中值
      setCheckedKeys() {
        this.$refs.tree.setCheckedKeys([3]);
      },
      // 清空选中值
      resetChecked() {
        this.$refs.tree.setCheckedKeys([]);
      }
    },

    data() {
      return {
        data: [{
          id: 1,
          label: '一级 1'
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3'
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>

 

•  单选的选中方法为setCurrentKey

<el-tree :data="data" ref="tree" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

<script>
  export default {
  methods: {
      this.$refs.tree.setCurrentKey('2');
  },
    data() {
      return {
        data: [{
          id: 1,
          label: '一级 1'
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 3,
            label: '二级 2-1'
          }, {
            id: 4,
            label: '二级 2-2'
          }]
        }, {
          id: 5,
          label: '一级 3'
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>