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

复制代码
 <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>
相关推荐
翻滚吧键盘32 分钟前
js代码09
开发语言·javascript·ecmascript
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景1 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5552 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
FogLetter2 小时前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
拾光拾趣录2 小时前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
木头没有瓜3 小时前
vscode离线安装插件
ide·vue.js·vscode
浪裡遊4 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass