el-tree设置利用setCheckedNodes/setCheckedKeys默认勾选节点，以及通过setChecked新增勾选指定节点-Toy模板网

这篇具有很好参考价值的文章主要介绍了el-tree设置利用setCheckedNodes/setCheckedKeys默认勾选节点，以及通过setChecked新增勾选指定节点。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

实现目标：在生成el-tree时，默认勾选其中某几个选项；或在进行某个选项的选中时，同时勾选上另一个选项。

实现效果：

在生成树结构时，默认勾选其中的两个选项。

el-tree设置利用setCheckedNodes/setCheckedKeys默认勾选节点，以及通过setChecked新增勾选指定节点在勾选其中一个选项时，另一个选项也被同时勾选。

el-tree设置利用setCheckedNodes/setCheckedKeys默认勾选节点，以及通过setChecked新增勾选指定节点

实现方法：

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

一、设置生成el-tree时默认勾选：两种方法

1.通过node设置

setCheckedNodes

设置目前勾选的节点，使用此方法必须设置 node-key 属性

(nodes) 接收勾选节点数据的数组

setCheckedNodes() {
        this.$refs.tree.setCheckedNodes([{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 9,
          label: '三级 1-1-1'
        }]);
      },

2.通过key设置 :里面为数组

setCheckedKeys 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性 (keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 true 则仅设置叶子节点的选中状态，默认值为 false

setCheckedKeys() {
        this.$refs.tree.setCheckedKeys([3, 5]);
      },

二、在勾选某一选项时，另一个选项也默认被勾选

勾选一个选项所触发的事件为：

check-change 节点选中状态发生变化时的回调共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点

<el-tree
  :data="data"
  show-checkbox
  default-expand-all
  node-key="id"
  ref="tree"
  highlight-current
  :props="defaultProps"
  @check-change="handleCheckChange" // 这一行为选中某选项所执行的方法
>
</el-tree>

另一个选项也默认被勾选：

setChecked

通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性

(key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点，默认为 false

handleCheckChange(data, checked, indeterminate) {
        checked ? this.aMethods(data, true) : this.aMethods(data, false)

      },
aMethods(item,bool){
 if(bool){
    this.$refs.tree.setChecked(5, true)
 }else{
    this.$refs.tree.setChecked(5, false)
   }
}

这样就实现了上述效果。更多内容可参考Element官网。文章来源地址https://www.toymoban.com/news/detail-422134.html

到了这里，关于el-tree设置利用setCheckedNodes/setCheckedKeys默认勾选节点，以及通过setChecked新增勾选指定节点的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！