Vue3使用el-table实现多级表头合并列

秋沐2024-08-13 23:24

不难发现，需要多级表头的列只需要在外面包一层el-table-column起名字即可

html 复制代码

<el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号" width="100" align="center" />
          <el-table-column prop="orgName" label="热企名称" width="150" align="center" />
          <el-table-column prop="" label="总分" width="150" align="center" />
          <el-table-column label="经营许可" align="center">
            <el-table-column prop="operationPermit" label="经营许可" width="150" align="center" />
          </el-table-column>
          <el-table-column label="热源能力" align="center">
            <el-table-column
              prop="heatSourceAbility1"
              label="具备备用热源"
              width="150"
              align="center"
            />
            <el-table-column
              prop="heatSourceAbility2"
              label="热源热量满足需求"
              width="150"
              align="center"
            />
          </el-table-column>
          <el-table-column label="经营场所" align="center">
            <el-table-column
              prop="operationPlace1"
              label="固定经营场所"
              width="150"
              align="center"
            />
            <el-table-column
              prop="operationPlace2"
              label="服务标准齐全"
              width="150"
              align="center"
            />
          </el-table-column>
        </el-table>