在Vue中实现Element UI的Table指定列添加圆点标志和悬浮提示信息功能

2023-05-27 22:27:35

在 Vue 的 Element UI 中向表格列添加圆点图标和悬浮提示

在 Element UI 中创建信息丰富、用户友好的表格时，您可能会想要添加一些视觉提示，以便用户快速识别需要进一步解释的单元格。使用圆点图标和悬浮提示，您可以轻松实现这一点。

步骤 1：创建圆点图标和提示

在您的表格模板中，为要显示圆点图标和提示的单元格添加一个插槽。在插槽中，包括以下元素：

对应单元格值的文本
一个带有 el-icon-info 类的圆点图标（如果单元格具有信息）
一个 el-tooltip 元素，其中包含提示信息（如果单元格具有信息）

<template v-slot="scope">
  <span>{{ scope.row.name }}</span>
  <i class="el-icon-info" v-if="scope.row.hasInfo"></i>
  <div v-if="scope.row.hasInfo" class="el-tooltip" :enterable="true">
    <div class="el-tooltip__content">
      {{ scope.row.info }}
    </div>
  </div>
</template>

步骤 2：添加事件处理

为了使悬浮提示在鼠标悬停时出现，您需要在 el-tooltip 元素上添加 mouseenter 和 mouseleave 事件处理程序。

<div v-if="scope.row.hasInfo" class="el-tooltip" :enterable="true" @mouseenter="showTooltip" @mouseleave="hideTooltip">
  <div class="el-tooltip__content">
    {{ scope.row.info }}
  </div>
</div>

步骤 3：显示和隐藏提示

在 Vue 实例中，使用两个方法来处理提示的显示和隐藏：

showTooltip() {
  // 在此处显示提示
},
hideTooltip() {
  // 在此处隐藏提示
}

代码示例

以下是一个完整的代码示例，演示如何将圆点图标和悬浮提示添加到 Element UI 表格：

<template>
  <el-table>
    <el-table-column label="名称">
      <template v-slot="scope">
        <span>{{ scope.row.name }}</span>
        <i class="el-icon-info" v-if="scope.row.hasInfo"></i>
        <div v-if="scope.row.hasInfo" class="el-tooltip" :enterable="true" @mouseenter="showTooltip" @mouseleave="hideTooltip">
          <div class="el-tooltip__content">
            {{ scope.row.info }}
          </div>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { name: 'John', hasInfo: true, info: '这是John的信息' },
        { name: 'Mary', hasInfo: false },
        { name: 'Bob', hasInfo: true, info: '这是Bob的信息' },
      ],
    };
  },
  methods: {
    showTooltip() {
      // 在此处显示提示
    },
    hideTooltip() {
      // 在此处隐藏提示
    },
  },
};
</script>

<style>
.el-icon-info {
  margin-left: 5px;
  color: #409EFF;
}
.el-tooltip {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -110%);
}
.el-tooltip__content {
  padding: 5px;
  background-color: #409EFF;
  color: #fff;
  border-radius: 4px;
}
</style>