基本能满足绝大部分的需求，利用el-table预留的2个插槽位，在里面分别又放了插槽，使之变成具名插槽，并且绑定了数据，十分灵活，表头和表格内容全部可以自定义，添加的属性不够可以自己加。另外，通过属性的透传，el-table中的Table Attributes 和 Table Events 可以直接写在WsTable标签内，十分酸爽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 引入样式 -->
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
</head>
<body>
<div id="app">
<ws-table
stripe
show-select
show-index
:table-data="tableData"
:table-columns="tableColumns"
@selection-change="selectionChange"
>
<template slot="genderHeader" slot-scope="{ scope }">
<div>
<span>{{ scope.header }}</span>
<div>
<el-select v-model="region" size="mini" placeholder="请选择性别">
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
<el-option label="未知" value="3"></el-option>
</el-select>
</div>
</div>
</template>
<template slot="gender" slot-scope="{ scope }">
<div>
{{ +scope.row.gender === 1 ? "男" : +scope.row.gender === 2 ? "女" :
"未知" }}
</div>
</template>
<template #operation>
<div>
<el-button>编辑</el-button>
<el-button>删除</el-button>
</div>
</template>
</ws-table>
</div>
<script type="text/template" id="WsTable">
<el-table
ref="WsTable"
:row-key="getRowKey"
:data="tableData"
v-bind="$attrs"
v-on="$listeners"
>
<!-- 表格序号 其实这里也可以放个具名插槽 -->
<el-table-column
v-if="showSelect"
width="50"
type="selection"
reserve-selection
></el-table-column>
<!-- 表格复选框 翻译记忆-->
<el-table-column
v-if="showIndex"
fixed
label="序号"
width="50"
type="index"
:align="align"
></el-table-column>
<el-table-column
v-for="(col, index) in tableColumns"
v-bind="col"
:key="col.prop"
:align="col.align || align"
>
<!-- 在el-table预留的2个插槽位置分别放置插槽 实现表头表格全部自定义，并带有默认值 -->
<template #header="scope">
<slot :name="col.header" :scope="{ header: col.label, ...scope }">
<span>{{ col.label }}</span>
</slot>
</template>
<template #default="scope">
<slot :name="col.prop" :scope="scope">
<span>{{ scope.row[col.prop] }}</span>
</slot>
</template>
</el-table-column>
<!-- 分页组件插槽 -->
<slot v-if="tableData.length > 10" name="pagination"></slot>
</el-table>
</script>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
const WsTable = {
name: "WsTable",
inheritAttrs: false,
template: "#WsTable",
props: {
// 表格数据
tableData: {
type: Array,
default: () => [],
require: true,
},
// 表格列和列属性：
// label显示的标题
// align对齐方式
// show-overflow-tooltip当内容过长被隐藏时显示tooltip
tableColumns: {
type: Array,
default: () => [],
require: true,
},
// 是否显示多选框
showSelect: {
type: Boolean,
default: false,
},
// 是否显示索引
showIndex: {
type: Boolean,
default: false,
},
// 对齐方式
align: {
type: String,
default: "center",
},
// 行数据的 Key，用来优化 Table 的渲染
rowKey: {
type: String,
default: "id",
},
},
methods: {
getRowKey(row) {
return row[this.rowKey];
},
// 请求完接口想清空表格所选
clearSelection() {
this.$refs.WsTable.clearSelection();
},
// 对 Table 进行重新布局
doLayout() {
this.$refs.WsTable.doLayout();
},
},
};
</script>
<script>
new Vue({
el: "#app",
components: {
WsTable,
},
data: function () {
return {
region: "",
tableData: [
{
name: "张三张三张三张三张三张三张三张三张三张三张三张三张三",
age: 18,
gender: "1",
},
{
name: "李四",
age: 19,
gender: "2",
},
{
name: "王五",
age: 20,
gender: "3",
},
],
tableColumns: [
{
label: "名称",
prop: "name",
propHeader: "nameHeader",
showOverflowTooltip: true,
},
{
label: "年龄",
prop: "age",
header: "ageHeader",
sortable: true,
width: 100,
},
{
label: "性别",
prop: "gender",
header: "genderHeader",
width: 1500,
},
{
label: "操作",
prop: "operation",
header: "operationHeader",
fixed: "right",
width: 200,
},
],
};
},
methods: {
selectionChange(selection) {
console.log("selection", selection);
},
},
});
</script>
</html>