elementui组件中，树形组件的使用

本是古典何须时尚 2022-10-27 01:34 10阅读 0赞

# 项目场景： #

--------------------

# 问题描述： #

通过树形结构展示，点击勾选数据。没有展开树结构的情况下，勾选树节点时，其叶子节点全部被勾选，@check-change=“handleCheckChange”，叶子没有响应check-change函数

<el-dialog
            title="短信接受对象选择"
            :visible.sync="dialogVisible"
            width="40%"
            :close-on-click-modal="false">
            <el-row class="person-selected" :gutter="20">
              <div v-for="person in nameList" :key="person.key">
                {
        {
         person.name }}
                <i class="el-icon-close" @click="eventPersonRemove(person.key)"></i>
              </div>
            </el-row>
            <el-row>
              <el-tree
                  :data="data"
                  show-checkbox
                  node-key="id"
                  ref="tree"
                  :render-after-expand=false
                  highlight-current
                  @check-change="handleCheckChange">
              </el-tree>
            </el-row>
          <el-row class="form-footer">
            <el-button @click="resetChecked">重 置</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </el-row>
        </el-dialog>

return {
        
            dialogVisible: false,
            data: [
              {
        
              id: 2,
              label: '研发部',
              isLeaf: false,
              children: [{
        
                id: 5,
                label: '王五',
                isLeaf: true,
              }, {
        
                id: 6,
                label: '赵六',
                isLeaf: true,
              }]
            }, {
        
              id: 3,
              label: '综合部',
              isLeaf: false,
              children: [{
        
                id: 7,
                label: '张三',
                isLeaf: true,
              }, {
        
                id: 8,
                label: '李四',
                isLeaf: true,
              }]
            }],
            nameList:[],
            defaultProps: {
        
              children: 'children',
              label: 'label'
            },
          }

--------------------

# 原因分析： #

elementUI的tree控件，其属性render-after-expand（默认为true） 是否在第一次展开某个树节点后才渲染其子节点，应绑定为false，不展开节点也渲染其子节点。

--------------------

# 解决方案： #

resetChecked() {
        
            this.$refs.tree.setCheckedKeys([]);
          },
          handleCheckChange(data, checked, indeterminate) {
        
            // console.log(data.label)
            let self = this;
            if (checked === false){
        
              for (let i = 0; i < self.nameList.length; i++) {
        
                if (self.nameList[i].key === data.id){
        
                  self.nameList.splice(i, 1);
                  break;
                }
              }
    
            }else {
        
              if (data.isLeaf) {
        
                self.nameList.push({
        name:data.label, key:data.id})
              }
    
            }
          },

.person-selected {
        
        padding: 10px;
        div {
        
          position: relative;
          float: left;
          min-width: 100px;
          height: 30px;
          padding: 0 20px;
          margin: 0 10px 10px 0;
          line-height: 30px;
          color: #fff;
          text-align: center;
          background-color: #0a8d4f;
          border-radius: 15px;
          i {
        
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 30px;
            line-height: 30px;
            text-align: left;
            z-index: 1;
          }
        }
      }