element-ui 自定义表头label(利用 :slot=“header“ slot-scope=“slot“)

大大。2024-02-20 21:40

复制代码

 <el-table :data="Gbtable" border style="width: 100%">
            <el-table-column prop=" date" label="责任方" align="center" >
            </el-table-column>
            <el-table-column prop="name" label="柜名" align="center">
            </el-table-column>
            <el-table-column prop="address" align="center">
              <template slot="header" slot-scope="slot">
                <span class="gbRed">*产品名称</span><br />
                <span class="gbMiniBlack">板件输条码/五金输名称</span>
              </template>
              <template slot-scope="scope">
                <div>
                </div>
              </template>
            </el-table-column>
 <el-table-column prop="name" label="材质" align="center">
            </el-table-column>
      </el-table>

效果如下：

重点看这：

复制代码

      <el-table-column prop="address" align="center">
//重点
              <template slot="header" slot-scope="slot">
                <span class="gbRed">*产品名称</span><br />
                <span class="gbMiniBlack">板件输条码/五金输名称</span>
              </template>
//
              <template slot-scope="scope">
                <div>
                </div>
              </template>
            </el-table-column>