Element-Ui解决table表头增加*

小小封收录于朝夕不倦

2022-08-16 约 300 字预计阅读 1 分钟

https://image.hikoutei.cn/blog/0Q8q2F.jpg!md

警告

本文最后更新于 2022-08-16，文中内容可能已过时。

步骤一

element-ui自带了一个render-header方法，首先我们先写一个函数，如下图，本人用了ts，正常在methods里面写就好，如果想把*号换成其他的可以在下面函数做适当修改。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


renderHeader(h, { column }) {
  return h('div', {
    attrs: {
      class: 'cell'
    },
    domProps: {
      innerHTML: '<span style="color:red">*&nbsp;</span>' + column.label
    }
  })
}

步骤二

紧接着把函数在el-table-column行用一下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<el-table-column
  prop="db_ip"
  :render-header="renderHeader"
  label="数据库IP">
  <template slot-scope="scope">
    <el-form-item :prop="'content.tableData.'+ scope.$index + '.db_ip'" :rules="rules.db_ip">
      <el-input size="mini" v-model="scope.row.db_ip"/>
    </el-form-item>
  </template>
</el-table-column>

然后我们看页面就可以看到*号已经有了，如果想加其他的可以依葫芦画瓢