picture

table-header-tips

應(yīng)用 element 中的 table 組件，自定義表頭 Tooltip 文字提示。

效果圖

效果圖

示例 demo 代碼

請(qǐng)點(diǎn)這里

引用 element-ui

npm install element-ui

在 main.js 中引入

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

增加全局組件 promptMessages 并在全局引用

在 src -> modules -> components -> messages 中增加 promptMessages 組件及 index.js 文件

promptMessages 組件

<template>
  <div class="tooltip">
    <el-tooltip effect="dark" placement="right">
      <div slot="content">
        <!-- 插槽，可提供多行的提示信息 -->
        <!-- 全局組件，這里是配置圖標(biāo)icon和提示信息的地方 -->
        <!-- 在其他組件中引用方式詳見 table-header-tips.vue 組件中的 renderHeaderMethods 方法 -->
        <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>

index.js 文件

import promptMessages from './promptMessages.vue';

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

export default promptMessages;

在 utils 文件夾 ?? 下，新增 components.js 用于 引入全局組件
components.js 文件

/**
 * Created by Administrator on 2019/07/03 0030.
 * 所有自定義全局組件在此引入
 */
import Vue from 'vue';
import promptMessages from '@/modules/components/messages';
Vue.use(promptMessages); // 表頭提示自定義提示信息組件

最后在 main.js 中引入 components.js 文件即可全局使用 promptMessages 組件。

import '@/utils/components.js'; // 自定義組件 js

table-header-tips 組件 自定義表頭方法 renderHeaderMethods

應(yīng)用了 element table 組件的 render-header（列標(biāo)題 Label 區(qū)域渲染使用的 Function）。

<template>
  <div class="table-header-tips">
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column
        prop="date"
        label="日期"
        width="180"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        :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: '王小虎',
            address:
              'SlideShare Inc., 490 2nd St, Suite 300, San Francisco, CA 94107'
          },
          {
            date: '2016-05-04',
            name: '李小虎',
            address:
              'Room 201,No.34,Lane 125,XiKang Road(South),HongKou District'
          },
          {
            date: '2016-05-01',
            name: '趙小虎',
            address:
              'Room 702, 7th Building, Hengda Garden, East District, Zhongshan'
          },
          {
            date: '2016-05-03',
            name: '黑小虎',
            address:
              'Room 403,No.37,ShiFan Residential Quarter,BaoShan District'
          }
        ]
      };
    },
    methods: {
      // 自定義表格
      // 例如：給表頭 地址 加一個(gè) icon，鼠標(biāo)移入icon展示提示信息
      renderHeaderMethods(h, { column }) {
        return h(
          'div',
          {
            style: 'display:flex;margin:auto;'
          },
          [
            h('span', column.label),
            h('promptMessages', {
              // 引用 promptMessages 全局組件
              props: {
                // messages 里面配置的信息即為 Tooltip 提示信息
                messages: ['地址提示信息，以下地址有中國????和澳洲????請(qǐng)仔細(xì)查看。']
              }
            })
          ]
        );
      }
    }
  };
</script>
<style>
  .table-header-tips {
    width: 1000px;
    margin: 50px auto;
  }
</style>