el-table父节点击button按钮新增子节点并展开子节点树

element el-table自带属性和自定义处理方法

element默认属性只能是在初始化加载时展开或点**>时进行展开树节点，但是如果实际项目需求是初始化加载的时候树节点是收起状态，然而点击展开并不是只能点击>,这样操作很不友好。初始化点击展开树节点，默认是通过懒加载lazy配合:load**进行，而自定义方法需要抛弃这样的操作，父节点击button按钮新增子节点并展开子节点树。

默认方式

这里我直接吧element的用例代码展示：

<template>
<div>
  <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>

  <el-table
    :data="tableData1"
    style="width: 100%"
    row-key="id"
    border
    lazy
    :load="load"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        tableData1: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          hasChildren: true
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {
      load(tree, treeNode, resolve) {
        setTimeout(() => {
          resolve([
            {
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ])
        }, 1000)
      }
    },
  }
</script>

element链接: element-ui-table.

自定义写法

        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="list"
          size="small"
          style="width: 100%"
          :row-key="(row) =>{return row.id}"   //重要代码
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"     //重要代码
          lazy
          @row-click="expandChange"             //重要代码
          :expand-row-keys="tableExpands"    //重要代码
        >
          <el-table-column label="操作" fixed="right" width="220">
            <template slot-scope="{ row }">
                <el-link
                  type="primary"
                  size="mini"
                  style="font-size:12px"
                  v-permission="['AbpIdentity.Users.Update']"
                  icon
                  @click="handleCreateSub(row)"
                >添加子任务</el-link>
            </template>
          </el-table-column>
        </el-table>

   data() {
     return {
     tableExpands: [],
     list: [],
     listLoading : false
	}
   }
   methods: {
    //获取列表
    getList() {
      this.listLoading = true;
      api.pagemain(this.listQuery).then(res=>{
          this.$set(this._data,"list",res.items)
          this.listLoading = false;
      })
    },
    // 获取子任务列表
    getChildrenList(tree, treeNode, resolve) {
      this.listLoading = true;
      let parentId = tree.id;
      this.maps.set(parentId, { tree, treeNode, resolve })
      api.pagesub(tree.id).then((response) => {
        this.list.map((item,i) => {
          if (item.id == tree.id) {
            item.children = response.items //获取动态的子节点存放在children里
          }
        });
        this.listLoading = false;
      })
    },
    //点击新增子任务
    handleCreateSub(row) {
      let self = this
      api.subcreate(tree.id).then((response) => {
          self.$notify({
            title: "成功",
            message: "新增子任务成功",
            type: "success",
            duration: 2000,
          });
          self.tableExpands = [row.id];//可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
          self.$refs.multipleTable.doLayout();//对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法
          const parentId  =row.id 
          const { tree, treeNode, resolve } =self.maps.get(parentId)
          self.getChildrenList(tree, treeNode, resolve);
        })
        .catch(() => {});
    },
    //点击每行触发事件
    expandChange(row,index,e){
      this.list.map((item,i) => {
        if (item.id == row.id) {//判断是否是父节点才能调用子节点接口
          this.getChildrenList(row)
          this.$refs.multipleTable.toggleRowExpansion(row)//用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）
        }
      });
    },
   }

1-1代表点击父节点行触发展开子节点
2-1代表点击添加子任务展开子节点，并刷新子节点
1-2,2-2代表子节点

自定义优缺点

个人认为优点是实现了想要的效果，缺点就是每次点击行都会调用一次接口，造成了性能浪费。