ElementUI中table表格自定义表头Tooltip文字提示

本文介绍如何使用 Element UI 的 Table 组件实现自定义表头 Tooltip 文字提示功能,包括创建全局组件 promptMessages 和在 Table 组件中应用自定义渲染方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

table-header-tips

  • 应用 element 中的 table 组件,自定义表头 Tooltip 文字提示。
效果图

效果图

示例 demo 代码

请点这里

引用 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">
        <!-- 插槽,可提供多行的提示信息 -->
        <!-- 全局组件,这里是配置图标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

应用了 element table 组件的 render-header(列标题 Label 区域渲染使用的 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: {
      // 自定义表格
      // 例如:给表头 地址 加一个 icon,鼠标移入icon展示提示信息
      renderHeaderMethods(h, { column }) {
        return h(
          'div',
          {
            style: 'display:flex;margin:auto;'
          },
          [
            h('span', column.label),
            h('promptMessages', {
              // 引用 promptMessages 全局组件
              props: {
                // messages 里面配置的信息即为 Tooltip 提示信息
                messages: ['地址提示信息,以下地址有中国🇨🇳和澳洲🇦🇺请仔细查看。']
              }
            })
          ]
        );
      }
    }
  };
</script>
<style>
  .table-header-tips {
    width: 1000px;
    margin: 50px auto;
  }
</style>
### ElementUI 表格组件自定义样式 在使用 `el-table` 组件时,为了满足项目需求中的特定设计风格,通常需要对表格的默认样式进行调整。这可以通过多种方式来完成。 #### 使用内联样式或类名修改单元格样式 对于简单的样式更改,可以直接通过给定列定义中的 `class-name` 或者 `header-align`, `align` 等属性来进行基本布局上的定制化处理[^2]: ```html <template> <el-table :data="tableData"> <!-- 定义一列表头并指定其样式 --> <el-table-column prop="date" label="日期" width="180" header-align="center" align="right"></el-table-column> ... </el-table> </template> ``` #### 动态设置行/列样式 当涉及到更复杂的逻辑判断下的样式变化时,则可以利用 `row-style` 和 `cell-style` 方法动态返回对象形式的 CSS 样式规则。此方法允许基于每一行的数据特性灵活地改变外观表现[^3]: ```javascript // JavaScript 部分 methods: { tableRowClassName({ row, rowIndex }) { if (rowIndex % 2 === 0) { // 偶数行背景颜色变浅灰色 return 'warning-row'; } else { return ''; } }, cellStyle({ row, column, rowIndex, columnIndex }) { const styles = {}; // 如果是最后一列则字体加粗显示 if(columnIndex === this.columns.length - 1){ styles.fontWeight = "bold"; } return styles; } } ``` ```css /* 对应上面偶数行高亮 */ .warning-row { background-color: #f0f9eb !important; } ``` #### 自定义表头 Tooltip 提示 针对某些情况下表头信息过长而无法完全展示的问题,可通过插槽机制配合 `el-tooltip` 实现悬停查看完整描述的功能[^1]: ```html <template slot="header" slot-scope="scope"> <el-tooltip effect="dark" :content="scope.column.label" placement="top-start"> {{ scope.column.label }} </el-tooltip> </template> ``` 以上便是几种常见的 `ElementUI el-table` 组件自定义样式的实践方案,具体实施可根据实际业务场景和个人偏好做出适当调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值