element自定义table表头，修改标题样式、添加tooltip

悠悠 2022-09-04 03:45 468阅读 0赞

示例代码如下：

<template>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
            :render-header="renderHeader">
          </el-table-column>
        </el-table>
    </template>
    
    <script>
    export default {
       data() {
            return {
              tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
              }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
              }]
            }
          },
      　  methods: {
    　　　　// render 事件 h即为cerateElement的简写
    　　　　renderHeader (h,{column}) {
            return h(
                'div',[ 
                     h('span', column.label),
                     h('el-tooltip',{
                         props:{
                            effect:'dark',
                            content:'详细地址',
                            placement:'top'
                             },　　　 
                     },[
                         h('i', {
                             class:'el-icon-question',
                             style:'color:#409eff;margin-left:5px;'
                         })
                     ])
                ]
            );
          }
     }
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70][]

注：也可使用element的**Tooltip 文字提示**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70]: /images/20220829/3a01231647d54da5bae34649c2e04da0.png