el-table表头自定义

《el-table》是Element UI库中的一个重要组件，用于创建可定制的数据表格。在el-table中，表头自定义非常灵活，你可以根据需求对表头进行如下操作：

数据绑定: 可以直接将列名、字段等数据作为配置项传入，动态生成表头标题。

<template>
<el-table :data="tableData" :columns="columns">
<!-- ... -->
</el-table>
</template>

<script>
export default {
data() {
return {
tableData: ...,
columns: [
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' },
// 自定义列，如自定义的复选框列
{ type: 'selection', width: 60, label: '选择' }
]
};
}
};
</script>
登录后复制

模板渲染: 使用render-header属性提供自定义渲染函数，可以在其中插入任意HTML元素或使用Vue组件。

<el-table-column
render-header="customHeaderRender"
header-align="center"
></el-table-column>

<script>
methods: {
customHeaderRender(h, { column, $index }) {
return h('span', `第${$index + 1}列`, { class: 'custom-header' });
}
}
</script>
登录后复制

事件处理: 在自定义表头上添加点击事件或排序功能，可以通过@click或sort-method来实现。

<el-table-column
label="点击排序"
@click="handleSort"
></el-table-column>

<script>
methods: {
handleSort(column) {
this.$emit('sort', column.prop);
}
}
</script>
登录后复制