el-table表头添加icon

要在 `el-table` 的表头添加一个 icon，你可以使用 `scoped slot` 来自定义表头的内容。以下是一个简单的例子：

<el-table :data="tableData">
  <el-table-column prop="name" label="Name">
    <template slot="header">
      <span>
        Name
        <i class="el-icon-info"></i>
      </span>
    </template>
  </el-table-column>
  <el-table-column prop="age" label="Age"></el-table-column>
</el-table>

在这个例子中，我们在表头中使用了一个 `scoped slot`，并在其中添加了一个 icon。`slot="header"` 表示我们要自定义表头的内容。在 `template` 标签中，我们可以使用任何 HTML 元素或 Vue 组件来构建表头的内容。在这个例子中，我们在表头的标题后添加了一个 `i` 元素，其类名为 `el-icon-info`，这是 element-ui 提供的一个 icon 类名，你可以根据自己的需要使用任何其他的 icon 类名。

相关问题

el-table 表头使用el-popover

为了在el-table表头中使用el-popover，您需要为每个popover绑定一个独特的变量。以下是一个例子，展示了如何在el-table表头中使用el-popover：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
      <template slot="header">
        <div>
          日期
          <el-popover
            placement="bottom"
            width="200"
            trigger="hover"
            v-model="popoverVisible1"
          >
            <p>这是一个日期选择器</p>
            <el-date-picker v-model="date" type="date" placeholder="选择日期"></el-date-picker>
          </el-popover>
          <el-button
            slot="reference"
            icon="el-icon-question"
            size="mini"
            @click="popoverVisible1 = true"
          ></el-button>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
      <template slot="header">
        <div>
          姓名
          <el-popover
            placement="bottom"
            width="200"
            trigger="hover"
            v-model="popoverVisible2"
          >
            <p>这是一个输入框</p>
            <el-input v-model="name" placeholder="请输入姓名"></el-input>
          </el-popover>
          <el-button
            slot="reference"
            icon="el-icon-question"
            size="mini"
            @click="popoverVisible2 = true"
          ></el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2022-01-01',
          name: '张三'
        },
        {
          date: '2022-01-02',
          name: '李四'
        },
        {
          date: '2022-01-03',
          name: '王五'
        }
      ],
      popoverVisible1: false,
      popoverVisible2: false,
      date: '',
      name: ''
    };
  }
};
</script>

在这个例子中，我们为每个el-popover绑定了一个独特的变量(popoverVisible1和popoverVisible2)，这样每个popover就可以正常渲染了。同时，我们还为每个popover添加了一个el-button，当用户将鼠标悬停在这个按钮上时，popover就会显示出来。

el-table 表头可以显示提示信息

`el-table` 是 Element UI 中的一个表格组件，它提供了一个功能来在表头单元格添加提示信息，即当用户将鼠标悬停在单元格上时显示的临时文字说明。这种提示信息通常用于帮助用户理解列的内容或者提供额外的信息。在 `el-table-column` 的配置中，你可以通过设置 `tooltip` 或者 `formatter` 属性来实现这个效果。

例如：

<el-table-column
  prop="title"
  label="标题"
  tooltip="这是一个带提示信息的列"
/>

或者

<el-table-column
  prop="title"
  label="标题"
  formatter={(row, column) => `<span>${row.title}</span><i class="el-icon-question" @mouseenter="showTooltip(column)"></i>`}
  scopedSlots={{
    default: ({ row }) => {
      return `<div>${row.title} <span slot="popover" v-if="column.tooltip">{{ column.tooltip }}</span></div>`;
    }
  }}
  methods={
    showTooltip(column) {
      this.$refs.table.$el.querySelector(`.el-tooltip[data-index="${column.property}"]`).popoverVisible = true;
    }
  }
/>

在这个例子中，`formatter` 函数负责生成包含提示信息的 HTML，而 `showTooltip` 方法则在鼠标进入时显示提示。注意，你需要在 Vue 实例中处理 `$refs` 和 `popoverVisible` 的更新。