Vue element Table 表頭提示文案展示

效果圖：

一：新建一個提示組件tableHeaderTip

<template>
  <div class="tooltip">
    <el-tooltip effect="dark" placement="right">
      <div slot="content">
        <!-- msg數組傳參，多行展示 -->
        <p v-for="(item, index) in messages" :key="index">{{item}}</p>
      </div>
      <!-- 可以做成自定義圖標或者文案 -->
      <i class="el-icon-info" style="color: #409eff;margin-left:5px;"></i>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'tableHeaderTip',
  props: {
    messages: {
      type: Array,
      default: []
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="scss" scope>
  .tooltip{display: inline-block;vertical-align: middle;}
</style>

二、父組件引入tableHeaderTip組件

// template
<el-table-column prop="sort_order" :render-header="renderHeader" align="center" label="排序" width="100">

// script
import tableHeaderTip from '@/components/tableHeaderTip'

export default {
  ...
  conponents: {
    tableHeaderTip  
  },
  ...
  methods: {
    renderHeader(h, { column }) {
      return h(  // 創建元素
        'div', [
          h('span', column.label),  // label標題文案
          h(tableHeaderTip, {  // tooltips組件
            props: {
              messages: ['提示：','雙擊單元格可以修改排序數！']
            }
          })
        ]
      )
    },
  }      
}