Element-plus中tree树形控件全选与取消全选的功能实现

页面展示

 代码结构

html

<el-checkbox v-model="selectAll" label="全选" @change="selectAllChange" />
<el-tree
  ref="treeRef"
  :data="pushData"
  show-checkbox
  default-expand-all
  check-on-click-node
  :default-checked-keys="selectNode"
  node-key="value"
  highlight-current
  style="width:100%"
/>

js

const state = reactive({
    pushData:[],//树形节点的数据
    selectNode:[],//默认选择节点的数组
})

const selectAllChange=()=>{
    if(state.selectAll){
       proxy.$refs['treeRef'].setCheckedNodes(state.pushData) //pushData是树形节点的data
    }else{
       proxy.$refs['treeRef'].setCheckedNodes([])
    }
}