目录

element-ui解决table表头增加*

步骤一

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>

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

https://oss.hikoutei.com/blog/hGbVBh.png