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

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

实现效果:

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

在勾选其中一个选项时,另一个选项也被同时勾选。

实现方法:

<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官网。

  • 9
    点赞
  • 41
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现el-tree默认全部勾选的效果,可以通过设置data属性中每个节点对象的checked属性为true来实现。具体实现方法如下: 1. 首先,在data属性中的每个节点对象中添加一个checked属性,并将其值设置为true。这样就能实现默认全部勾选的效果。 ``` data: [ { id: 1, label: '选项1', checked: true }, { id: 2, label: '选项2', checked: true }, { id: 3, label: '选项3', checked: true }, // 其他节点... ] ``` 2. 在el-tree组件的模板中,使用v-model绑定每个节点对象的checked属性,确保选中状态与checked属性的值同步。 ```html <el-tree :data="data" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps" v-model="node.checked"></el-tree> ``` 通过以上两个步骤,就能实现el-tree默认全部勾选的效果。每个节点对象的checked属性设置为true,即可默认选中该节点。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [el-tree设置利用setCheckedNodes/setCheckedKeys默认勾选节点,以及通过setChecked新增勾选指定节点](https://blog.csdn.net/weixin_43312391/article/details/123844299)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值