Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用

当我们在使用 Element-UI 的 table 组件时，有时候我们需要对表头进行一些自定义的操作，比如修改表头的样式、添加 tooltip、自定义表头的渲染内容等等。本文将详细介绍如何进行这些操作。

自定义表头

Element-UI 的 table 组件默认的表头样式是比较简约的，但有时候我们需要将表头样式进行一些自定义，比如修改表头的字体大小、颜色、加粗等，这时候我们可以使用 Element-UI 提供的 scoped slot 进行自定义表头。

<template>
  <el-table :data="tableData" border>
    <!-- 使用 slot-scope 定义作用域插槽 -->
    <el-table-column v-for="column in columns" :key="column.prop" :label="column.label" :prop="column.prop">
      <!-- 定义表头的作用域插槽 -->
      <template slot-scope="{ column }">
        <span :style="{ 'font-size': '14px', 'color': '#666', 'font-weight': 'bold' }">
          {{ column.label }}
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>

上面的代码中，我们使用 slot-scope 定义作用域插槽，然后在表头的作用域插槽中定义自己想要的表头样式。这里我们将表头的字体大小设置为 14px，颜色设置为 #666，加粗设置为 bold。

添加 Tooltip

有时候我们需要给表头添加一些提示信息，或者对一些特定的列进行提示。我们可以使用 Element-UI 提供的 tooltip 组件来实现这个功能。

<template>
  <el-table :data="tableData" border>
    <el-table-column v-for="column in columns" :key="column.prop" :label="column.label" :prop="column.prop">
      <template slot="header">
        <!-- 定义 tooltip 显示的文本 -->
        <el-tooltip content="这是一个tooltip" placement="top">
          <span>{{ column.label }}</span>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
</template>

上面的代码中，我们在表头的作用域插槽中使用了 el-tooltip 组件来实现 tooltip 的功能，通过 content 属性来指定 tooltip 显示的文本内容。

自定义渲染表头内容

有时候我们需要自定义渲染表头的内容，比如添加一张图片或者自定义一个按钮等等。可以使用 :render-header 属性来实现这个功能。

<template>
  <el-table :data="tableData" border>
    <el-table-column v-for="column in columns" :key="column.prop" :label="column.label" :prop="column.prop"
      :render-header="renderHeader">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      columns: [
        {
          label: '名称',
          prop: 'name',
        },
        {
          label: '操作',
          prop: 'action',
        },
      ],
    };
  },
  methods: {
    renderHeader(h, { column, $index }) {
      if (column.prop === 'action') {
        return h('span', null, [
          h('el-button', { props: { type: 'primary' } }, '添加'),
          h('el-button', { props: { type: 'danger' } }, '删除'),
        ]);
      } else {
        return h('span', null, [
          h('img', { attrs: { src: 'https://www.example.com/image.png', width: '32', height: '32' } }),
          h('span', null, column.label),
        ]);
      }
    },
  },
};
</script>

上面的代码中，我们给 el-table-column 组件添加了 :render-header 属性，然后定义了一个 renderHeader 函数，这个函数接收两个参数：h 和 { column, $index }。其中，h 是 createElement 函数，我们可以通过它来创建 DOM 元素。{ column, $index } 是当前列的数据和索引。

在 renderHeader 函数中，我们判断当前列的 prop 是否为 action，如果是的话，返回两个 el-button 组件。如果不是的话，返回一个有图片和文字的 span 元素。

总结

这篇文章主要讲解了 Element-UI 的 table 组件如何进行自定义表头、修改列样式、添加 Tooltip 和自定义渲染表头内容。这些操作都可以通过 Element-UI 提供的 scoped slot、tooltip 组件和 :render-header 属性来实现。可以根据实际需求进行选择，灵活运用这些功能能够让我们更快速、更方便地开发出高质量的表格应用。