el-tree树的全部展开(折叠),全选(全不选),父子联动

el-tree树的全部展开(折叠),全选(全不选),父子联动

// 多选的按钮
<el-form-item label="状态">
   <el-checkbox-group v-model="jurisdictionType">
     <el-checkbox label="展开/折叠" @change="changeOpen">el-checkbox>
     <el-checkbox label="全选/全不选" @change="changeAll">el-checkbox>
     <el-checkbox label="父子联动" @change="changeFather">el-checkbox>
   el-checkbox-group>
 el-form-item>
 
 <el-form-item label="菜单权限" class="auto_form">
   <el-tree
     ref="tree"
     :data="dataList"
     show-checkbox
     node-key="id"
     :check-strictly="!menuCheckStrictly"
     :default-checked-keys="checkedKeys"
     :props="defaultProps"
   >
   el-tree>
 el-form-item>
data(){
	return {
		jurisdictionType: [],
		dataList: [{
          id: 1,
          label: '一级 2',
          children: [{
            id: 3,
            label: '二级 2-1',
            children: [{
              id: 4,
              label: '三级 3-1-1'
            }, {
              id: 5,
              label: '三级 3-1-2',
              disabled: true
            }]
          }, {
            id: 2,
            label: '二级 2-2',
            disabled: true,
            children: [{
              id: 6,
              label: '三级 3-2-1'
            }, {
              id: 7,
              label: '三级 3-2-2',
              disabled: true
            }]
          }]
        }],
	}
} 

	changeOpen(e) {
      if (e) {
        // 展开
        this.setAllExpand()
      } else {
        // 折叠
        this.setAllFold()
      }
    },
    // 全选和全不选
    changeAll(e) {
      if (e) {
        this.$refs.tree.setCheckedNodes(this.dataList)
      } else {
        this.$refs.tree.setCheckedKeys([])
      }
    },
    // 父子联动
    changeFather(e) {
      if (e) {
        this.menuCheckStrictly = true
      } else {
        this.menuCheckStrictly = false
      }
    },
    // 折叠所有节点
    setAllFold() {
      for (var i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
        this.$refs.tree.store._getAllNodes()[i].expanded = false
      }
    },
    // 展开所有节点
    setAllExpand() {
      for (var i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
        this.$refs.tree.store._getAllNodes()[i].expanded = true
      }
    },

你可能感兴趣的:(Web前端,vue.js,javascript,前端)