实现给el-table表头加必填符号星号（红*）

时间：2022-12-11 01:00:01 thx03微量程动态扭矩传感器

效果：
从一开始的
在这里插入图片描述
改变为添加必填星号

我在网上查了很多方法，包括header-cell-style或header-cell-class-name改变表头style或类：

这种方法可以应用于小项目，但在大项目中，很难定位到可以产生效果的选择器上，会比较麻烦，而且很难控制。

这边提供一个更快捷好使的方法：使用render-header

1.在需要加必填星号的el-table-column上添加render-header属性。

<el-table-column :render-header="addRedStar" v-for="(item, index) in columns" :prop="item.prop">   <template>     ...   template> el-table-column>

2.addRedStar函数。除了加红*还可以有其他操作来控制表头内容，可以按需编写。

    // 将必填符号添加到表头*     addRedStar(h, { 
          column }) { 
               return [         h("span", { 
         style: "color: red" }, "*"),         h("span", " "   column.label),       ];     },

完工

必填项验证需手动添加

题外话:最近项目内容一直把旧看板迁到新平台，所以没有技术含量，断了很久。
如果新项目启动后可能会使用VUE3.届时将分享任何新发现。
THX~

锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

实现给el-table表头加必填符号星号（红*）

相关文章