基本能滿足絕大部分的需求，利用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 }">
{{ +scope.row.gender === 1 ? "男" : +scope.row.gender === 2 ? "女" :
"未知" }}
<template #operation>
<el-button>編輯</el-button>
<el-button>删除</el-button>
</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>
<!-- 表格複選框 翻譯記憶-->
v-if="showIndex"
fixed
label="序号"
type="index"
:align="align"
v-for="(col, index) in tableColumns"
:key="col.prop"
:prop="col.label"
:width="col.width"
:align="col.align || align"
:fixed="col.fixed"
:sortable="col.sortable"
:show-overflow-tooltip="col.showOverflowTooltip"
>
<!-- 在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>
</el-table-column>
<!-- 分頁元件插槽 -->
<slot v-if="tableData.length > 10" name="pagination"></slot>
</el-table>
</script>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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: {
// 是否顯示多選框
showSelect: {
type: Boolean,
default: false,
// 是否顯示索引
showIndex: {
// 對齊方式
align: {
type: String,
default: "center",
// 行資料的 Key，用來優化 Table 的渲染
rowKey: {
default: "id",
},
methods: {
getRowKey(row) {
return row[this.rowKey];
// 請求完接口想清空表格所選
clearSelection() {
this.$refs.WsTable.clearSelection();
// 對 Table 進行重新布局
doLayout() {
this.$refs.WsTable.doLayout();
};
</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,
};
selectionChange(selection) {
console.log("selection", selection);
});
</html>
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)