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

项目场景：

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

---

问题描述：

通过树形结构展示，点击勾选数据。没有展开树结构的情况下，勾选树节点时，其叶子节点全部被勾选，@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;
      }
    }
  }