美文网首页
el-table 单行表头和合并单元格多行表头,颜色设置

el-table 单行表头和合并单元格多行表头,颜色设置

作者: 而生lhw | 来源:发表于2023-01-28 16:47 被阅读0次
image.png

1、结构

          <el-table
             v-loading="loading"
             :data="tableList"
             height="100%"
             :header-cell-style="cellStyle"
             border
           >
             <el-table-column
               type="index"
               label="序号"
               width="55"
               align="center"
             />
             <el-table-column
               label="测试1"
               align="center"
               min-width="140"
               prop="ceshi1"
               :show-overflow-tooltip="true"
             />
             <el-table-column label="表1" align="center">
               <el-table-column
                 align="center"
                 label="测试2"
                 min-width="140"
                 header-align="center"
                 prop="ceshi2"
                 :show-overflow-tooltip="true"
               />
               <el-table-column
                 align="center"
                 label="测试3"
                 min-width="140"
                 header-align="center"
                 prop="ceshi3"
                 :show-overflow-tooltip="true"
               />
               <el-table-column
                 label="测试4"
                 align="center"
                 min-width="140"
                 prop="ceshi4"
                 :show-overflow-tooltip="true"
               />
               <el-table-column
                 label="测试5"
                 align="center"
                 min-width="140"
                 prop="ceshi5"
                 :show-overflow-tooltip="true"
               />
               <el-table-column
                 label="测试6"
                 align="center"
                 min-width="140"
                 prop="ceshi6"
                 :show-overflow-tooltip="true"
               />
             </el-table-column>
             <el-table-column label="表2" align="center">
               <el-table-column
                 label="测试7"
                 align="center"
                 min-width="140"
                 prop="ceshi7"
                 :show-overflow-tooltip="true"
               />
               <el-table-column
                 label="测试8"
                 align="center"
                 min-width="140"
                 prop="ceshi8"
                 :show-overflow-tooltip="true"
               />
               <el-table-column
                 label="测试9"
                 align="center"
                 min-width="140"
                 prop="ceshi9"
                 :show-overflow-tooltip="true"
               />
               <el-table-column
                 label="测试10"
                 min-width="140"
                 align="center"
                 prop="ceshi10"
                 :show-overflow-tooltip="true"
               />
               <el-table-column
                 label="测试11"
                 align="center"
                 min-width="140"
                 prop="ceshi11"
                 :show-overflow-tooltip="true"
               />
             </el-table-column>
           </el-table>

2、js

   cellStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0 && columnIndex == 1) {
      } else if (rowIndex == 0 && columnIndex == 2) {
        return "background:#7B68EE;";
      } else if (rowIndex == 0 && columnIndex == 3) {
        return "background:#66CDAA;";
      } else if (rowIndex == 1 && columnIndex < 5) {
        return "background:#7B68EE;";
      } else if (rowIndex == 1 && columnIndex >= 5 && columnIndex < 10) {
        return "background:#66CDAA;";
      } 
    },

相关文章

网友评论

      本文标题:el-table 单行表头和合并单元格多行表头,颜色设置

      本文链接:https://www.haomeiwen.com/subject/eltuhdtx.html