<!--region 封裝table-->
<template>
<div class="table">
<el-table
id="iTable"
:data="data"
ref="mutipleTable"
@selection-change="handleSelectionChange"
v-loading="isLoad"
element-loading-text="數據正在加載中..."
:show-summary="isShowSummary"
:empty-text="emptyText"
:border="border"
>
<!--region 數據列-->
<template v-for="column in columns">
<template v-if="column.type">
<el-table-column
:type="column.type"
:key="column.label"
:label="column.label"
:align="column.align"
:width="column.width"
></el-table-column>
</template>
<template v-else>
<el-table-column
:prop="column.prop"
:key="column.label"
:label="column.label"
:align="column.align"
:width="column.width"
>
<template slot-scope="scope">
<slot
:scope="scope.row"
v-if="column.slot"
:name="column.slot"
:row="scope.row[column.slot]"
/>
<span v-else>{{ scope.row[column.prop] }}</span>
</template>
</el-table-column>
</template>
</template>
<!--endregion-->
</el-table>
</div>
</template>
<!--endregion-->
<script>
export default {
props: {
// 數據列表
data: {
type: Array,
default: [],
},
// 需要展示的列 === prop：列數據對應的屬性，label：列名，align：對齊方式，width：列寬, // table 表格的控制參數
columns: {
type: Array,
default: [],
},
//是否加載
isLoading: {
type: Boolean,
default: false,
},
//是否在表尾顯示合計行
isShowSummary: {
type: Boolean,
default: false,
require: false,
},
//emptyText
emptyText: {
type: String,
default: "暫無數據",
require: false,
},
//是否帶邊框
border: {
type: Boolean,
default: false,
require: false,
},
//選擇方式（僅用於多選時）
type: {
type: String,
default: "select", //select：多選 radio：單選
require: false,
},
},
// 數據
data() {
return {
pageIndex: 1,
multipleSelection: [], // 多行選中
isLoad: this.isLoading,
};
},
watch: {
isLoading: function (val, old) {
this.isLoad = val;
},
},
methods: {
// 多行選中
handleSelectionChange(val) {
this.multipleSelection = val;
this.$emit("result", val);
},
},
};
</script>
使用場景：
<script> import Table from "@/components/Table"; export default { components: { Table, }, data() { return { projectList: [], //項目列表 projectListCloumn: [ { type: "index", label: "序號", }, { prop: "name", label: "工程項目或者費用名稱", }, { prop: "projectType", label: "項目類型", slot: "projectType", }, { prop: "amount", label: "概算總價(萬元)", }, { prop: "purchaseType", label: "采購形式", slot: "purchaseType", } ], }; }, } </script>
<Table :data="projectList" :columns="projectListCloumn">
<template slot="projectType" slot-scope="scope">
<el-select v-model="scope.scope.projectType" placeholder="請選擇">
<el-option
v-for="item in projectTypes"
:key="item.value"
:label="item.text"
:value="item.value"
>
</el-option>
</el-select>
</template>
<template slot="purchaseType" slot-scope="scope">
<el-select v-model="scope.scope.purchaseType" placeholder="請選擇">
<el-option
v-for="item in purchaseTypes"
:key="item.value"
:label="item.text"
:value="item.value"
>
</el-option>
</el-select>
</template>
<template slot="option" slot-scope="scope">
<i class="el-icon-document font-purple"
><span @click="save(scope.scope.id)">查看</span></i
>
<i class="el-icon-document font-purple"><span>啟動</span></i>
<i class="el-icon-document font-purple"><span>編輯</span></i>
<i class="el-icon-delete font-red"><span>刪除</span></i>
</template>
</Table>
如果不需要自定義列內容，只是想單純展示的話，在定義列的時候就不需要定義slot，直接定義prop及lable就好
然后在頁面中直接使用封裝的組件就好，代碼如下
<Table :data="projectList" :columns="projectListCloumn"></Table>
注：1、template 中的slot值一定要跟列定義中的slot值一樣，不然無法對應匹配
2、slot-scope中的scope值實際包含row及scope，但是真正的列表行數據在scope中，所以如果想取當前行數據的話，一定要通過scope.scope來取值，不然就修改table封裝中的scope值