This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

table-header-tips

Use the Table component of element to customize the Tooltip text.

rendering

Sample demo code

Please click here

Reference element – the UI

npm install element-ui
Copy the code

Introduced in main.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Copy the code

Added global component promptMessages and referenced globally

Add the promptMessages component and the index.js file in SRC -> modules -> Components -> Messages

PromptMessages components

<template>
  <div class="tooltip">
    <el-tooltip effect="dark" placement="right">
      <div slot="content">
        <! -- slot, which can provide multi-line prompt information -->
        <! -- Global component, here is where to configure icon and prompt message -->
        <! RenderHeaderMethods (table-header-tips.vue) ¶
        <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: 'promptMessages'.data() {
      return {};
    },
    props: {
      messages: {
        type: Array.default() {
          return[]; }}}};</script>
Copy the code

Index. Js file

import promptMessages from './promptMessages.vue';

/* istanbul ignore next */
promptMessages.install = function(Vue) {
  Vue.component(promptMessages.name, promptMessages);
};

export default promptMessages;
Copy the code

In the utils folder 📁, add components.js to import the global component components.js file

/** * Created by Administrator on 2019/07/03 0030. * All custom global components are introduced here */
import Vue from 'vue';
import promptMessages from '@/modules/components/messages';
Vue.use(promptMessages); // Table header prompt custom prompt message component
Copy the code

Finally, the promptMessages component can be used globally by importing the components.js file in main.js.

import '@/utils/components.js'; // Customize component jsCopy the code

Table – header-TIPS Component custom header method renderHeaderMethods

The Element Table component’s render-header (the Function used to render the column title Label area) is applied.

<template>
  <div class="table-header-tips">
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column
        prop="date"
        label="Date"
        width="180"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="Name"
        width="180"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="Address"
        :show-overflow-tooltip="true"
        :render-header="renderHeaderMethods"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'tableHeaderTips'.data() {
      return {
        tableData: [{date: '2016-05-02'.name: 'Wang Xiaohu'.address:
              'SlideShare Inc., 490 2nd St, Suite 300, San Francisco, CA 94107'
          },
          {
            date: '2016-05-04'.name: 'Li Xiaohu'.address:
              'Room 201,No.34,Lane 125,XiKang Road(South),HongKou District'
          },
          {
            date: '2016-05-01'.name: 'Zhao Xiaohu'.address:
              'Room 702, 7th Building, Hengda Garden, East District, Zhongshan'
          },
          {
            date: '2016-05-03'.name: Black Tiger.address:
              'Room 403,No.37,ShiFan Residential Quarter,BaoShan District'}}; },methods: {
      // Customize the table
      // For example, add an icon to the header address and move the mouse pointer over the icon to display the prompt information
      renderHeaderMethods(h, { column }) {
        return h(
          'div',
          {
            style: 'display:flex; margin:auto; '
          },
          [
            h('span', column.label),
            h('promptMessages', {
              // References the promptMessages global component
              props: {
                // Messages Contains Tooltip information
                messages: [The following addresses are China 🇨🇳 and Australia 🇦🇺. Please check them carefully. ']}})]); }}};</script>
<style>
  .table-header-tips {
    width: 1000px;
    margin: 50px auto;
  }
</style>
Copy the code