element table表格嵌套

element table嵌套二级

vue html

      <el-table :row-class-name="getRowClass"
        :data="tableData.slice((paginForm.currentPage - 1) * paginForm.pageSize, paginForm.currentPage * paginForm.pageSize)"
        style="width: 100%;"
        :header-cell-style="{ color: '#888', background: '#F2F3F5',height:'42px',fontWeight:'normal'}"
        :cell-style="{borderBottom: '1px dashed rgb(187,187,187)'}">
        <el-table-column type="expand">
          <template slot-scope="props" v-if="props.row.children!=[]">
            <research-children @editChildRow="editChildRow" ref="childresearch" :datalist="props.row">
            </research-children>
          </template>
        </el-table-column>
        <el-table-column align="center" type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column show-overflow-tooltip align="center" prop="class" label="课题来源" min-width="200px">
        </el-table-column>
        <el-table-column show-overflow-tooltip align="center" prop="name" label="课题名称" min-width="200px">
        </el-table-column>
        <el-table-column show-overflow-tooltip align="center" prop="id" label="课题编号" min-width="100px">
        </el-table-column>
        <el-table-column show-overflow-tooltip align="center" prop="number" label="校内财务编号" min-width="200px">
        </el-table-column>
        <el-table-column show-overflow-tooltip align="center" prop="cost" label="经费" min-width="100px">
        </el-table-column>
        <el-table-column show-overflow-tooltip align="center" prop="balance" label="余额" min-width="100px">
        </el-table-column>
        <el-table-column show-overflow-tooltip align="center" prop="charge" label="课题负责人" min-width="100px">
        </el-table-column>
        <el-table-column show-overflow-tooltip align="center" prop="startTime" label="开始时间" min-width="100px">
        </el-table-column>
        <el-table-column show-overflow-tooltip align="center" prop="endTime" label="结束时间" min-width="100px">
        </el-table-column>
        <el-table-column show-overflow-tooltip align="center" prop="task" label="主要任务指标" min-width="200px">
        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="180">
          <template slot-scope="scope">
            <el-button @click.native.prevent="addChildRow(scope.$index,scope.row)" type="text" size="small"
              style="color:#FC5554">
              增加子课题组
            </el-button>
          </template>
        </el-table-column>
      </el-table>

json格式

{
      "id": "1",
      "name": "大数据应用-数据可视化",
      "class": "大数据应用",
      "number": "FDH432333",
      "type": "FJU3212",
      "cost": "3252612.00",
      "balance": "2612.00",
      "charge": "张娜",
      "startTime": "2022-08-12",
      "endTime": "2022-12-25",
      "task": "",
      "speed": "进行中",
      "children": [
        {
          "id": "1",
          "name": "大数据应用-数据可视化",
          "class": "大数据应用",
          "number": "FDH432333",
          "type": "FJU3212",
          "cost": "3252612.00",
          "balance": "2612.00",
          "charge": "张娜",
          "startTime": "2022-08-12",
          "endTime": "2022-12-25",
          "task": "",
          "speed": "进行中",
          "node": "数据收集"
        },
        {
          "id": "1",
          "name": "大数据应用-数据可视化",
          "class": "大数据应用",
          "number": "FDH432333",
          "type": "FJU3212",
          "cost": "3252612.00",
          "balance": "2612.00",
          "charge": "张娜",
          "startTime": "2022-08-12",
          "endTime": "2022-12-25",
          "task": "",
          "speed": "进行中",
          "node": "数据收集"
        }
      ]
    },

css当没有子表格时隐藏箭头

 getRowClass(row, rowIndex) {
        // children 是你子项的数组 key
        if (row.row.children.length === 0) {
          return 'row-expand-cover'
        }
      },
      /deep/ .el-table .row-expand-cover .cell .el-table__expand-icon {
    display: none;
  }