element-plus树形表格的嵌套

1.树形表格

<el-table :data="props.row.details" row-key="sourceCode"
                      :border="true"
                      :default-expand-all="false" //不扩展所有的子节点
                      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"//树形结构子节点
                      @expand-change="toggleExpand"
                      :row-class-name="rowClassName"
                      :indent="35" //展示树形数据时，树节点的缩进
                      :header-cell-style="{'text-align':'left'}"
                      :cell-style="{'text-align':'left'}"//左对齐，方便刊出层级结构，默认居中不方便看
            >
              <el-table-column label="名称" prop="name" align="center"
                               :show-overflow-tooltip="true"/>//当数据太多可以不展示所有，hover显示
</el-table>

2.展开行：在字段最前面写

<el-table v-loading="loading" :data="demandList" :max-height="tableHeight" @expand-change="toggleExpand">
      <el-table-column type="expand">
          <template #default="props">

<el-table :data="props.row.details" :border="false">

/> </template>

　　　　</el-table-column>

</el-table>

async function toggleExpand(selection) {
  // let res = await getDtail(selection.id);
}

3.结合展开和树形

直接把上面的普通表格换成树形表格就行

<template>

<el-table v-loading="loading" :data="demandList" :max-height="tableHeight" @expand-change="toggleExpand">
      <el-table-column type="expand">
        <template #default="props">
          <el-table ref="table"
                    :data="props.row.details" row-key="code"
                    :border="true"
                    :default-expand-all="false"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                    @expand-change="toggleExpand"
                    :row-class-name="tableRowClassName"
                    :indent="35"

                    :header-cell-style="{'text-align':'left',backgroundColor: '#d9d9d9', fontSize: '14px', padding: '10px', color: 'black', fontWeight: 'normal'}"
                    :cell-style="{'text-align':'left'}"
                    style="width: 100%"
                    :show-overflow-tooltip="true"
                    :max-height="tableHeight-130"
          >
            <el-table-column label="名称" prop="name" align="center"/>
          </el-table>
        </template>
      </el-table-column>
    </el-table>

</template>

<script setup>

/** 打开列表子需求 */
async function toggleExpand(selection) {
  // let res = await getDemandDtail(selection.id);
}

// // 根据data返回的每一行的数据判断节点级别,再修改这一行的样式
function tableRowClassName({row, rowIndex}) {
  if (row.level === 1) {
    console.log(rowIndex, '一行================', row)
    return 'first-level-row'
  } else if (row.level === 2) {
    console.log(rowIndex, '二行================', row)
    return 'second-level-row'
  } else if (row.level === 3) {
    console.log(rowIndex, '三行================', row)
    return 'third-level-row'
  }
}

</script>

<style lang="scss" scoped>

:deep(.el-table .first-level-row td) {
  background-color: #ffffff !important /* 第一级行的背景色，写的时候只写到了这个行类，没加td，就算使用/deep/深度选择器了也还是死活不生效，也尝试过放在不加scope的全局样式，最后加了单元格td才生效，相当于给每个单元格都加上了样式 */

}

:deep(.el-table .second-level-row td) {
  background-color: #e8e8e8 !important /* 第二级行的背景色 */

}

:deep(.el-table .third-level-row td) {
  background-color: #c5c5c1 !important /* 第三级行的背景色 */

}
</style>