element-ui table 展开行

实现效果

实现代码

	// 当 row 中包含 children 字段时，被视为树形数据。支持子节点数据异步加载。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。
	<el-table
        :data="searchResult"
        style="width: 100%"
        height="385"
        :header-cell-style="{
          'background-color': '#2C2E3D',
          'text-align': 'center', //控制整体居中，就不用在每行都加align="center"
          'color': '#fff',
          'font-family': 'PingFangSC-Medium, PingFang SC',
          'font-weight': 500,
          'letter-spacing': '1px',
          'height': '60px'
        }"
        :cell-style="{ 'text-align': 'center', color: '#fff' }"
        @row-click="rowClick"
        row-key="id" // 渲染树形数据时，必须要指定 row-key。
        lazy	//设置 Table 的 lazy 属性为 true
        :load="load"  //加载函数 load
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" //通过 tree-props 配置children 与 hasChildren 
      >
      </el-table>
      //这里的接口返回值如果没有hasChildren字段要遍历加上
      res.data.row.map((item, index) => {
                item.id = (this.currentPage - 1) * this.pagesize + index + 1; //控制展开项
                item.hasChildren = true;
                return item;
              });
      //加载函数 load 
		load(tree, treeNode, resolve) {
      		this.$api.caseRetrieval.getAllCase({
         		identityNum: tree.identityNum
       	})
       .then(res => {
         res.data.forEach((i, index) => {
           i.id = tree.id + "-" + (index + 1);
         });
         resolve(res.data);
       });
   	},