vue3 el-table-column 列头添加 图标按钮
在 Vue 3 中使用 Element Plus 的 <el-table-column> 组件时，想要在列头添加图标按钮，可以通过自定义列头模板来实现。这可以通过使用 <template #header> 插槽来完成。以下是一个示例，展示如何在 <el-table-column> 的列头添加一个图标按钮：
首先，确保你已经安装并引入了 Element Plus。如果还没有安装，可以通过 npm 或 yarn 来安装：
npm install element-plus --save
# 或者
yarn add element-plus然后，在你的 Vue 组件中引入所需的 Element Plus 组件和样式：
import { ElTable, ElTableColumn } from 'element-plus';
import 'element-plus/dist/index.css';接着，你可以在模板中使用 <el-table> 和 <el-table-column>，并通过 <template #header> 插槽在列头添加图标按钮。这里使用 Font Awesome 作为图标库的例子，你也可以使用其他图标库如 Material Icons 或其他自定义图标。
<template><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"><template #header><div style="display: flex; justify-content: space-between; align-items: center;"><span>日期</span><el-button icon="el-icon-edit" circle @click="handleEdit"></el-button> <!-- 使用 Element Plus 内置图标 --></div></template></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table>
</template><script setup>
import { ref } from 'vue';
import { ElTable, ElTableColumn, ElButton } from 'element-plus';
import 'element-plus/dist/index.css';const tableData = ref([{ date: '2016-05-02', name: '张三', address: '上海市普陀区金沙江路 1518 弄' },{ date: '2016-05-04', name: '李四', address: '上海市普陀区金沙江路 1517 弄' },// 更多数据...
]);const handleEdit = () => {console.log('Edit button clicked');
};
</script>在这个示例中，我们使用了 Element Plus 的 <el-button> 组件并为其添加了 icon 属性来显示一个图标。你可以通过更改 icon 的值来使用不同的图标，例如使用 Font Awesome 的图标类名（如果你已经引入了 Font Awesome）：
<el-button :icon="`fas fa-edit`" circle @click="handleEdit"></el-button> <!-- 使用 Font Awesome 图标 -->确保你已经引入了 Font Awesome 的 CSS 文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>通过这种方式，你可以在 <el-table-column> 的列头中灵活地添加任何你需要的自定义元素，包括图标按钮。