Table組件
因?yàn)檎Ｐ枨髞碚f表格都會(huì)帶翻頁芒涡，所以我就直接在一個(gè)組件里面做好了
<div class="table">
<!-- 表格開始 -->
<el-table
ref="table"
v-loading="loading"
element-loading-text="加載中"
:data="tableData"
border
stripe
style="width: 100%"
@sort-change="handleSortChange"
>
<!-- prop是對應(yīng)列內(nèi)容的字段名 width是對應(yīng)列寬度 sortable是是否排序 label是對應(yīng)列名稱 -->
<el-table-column
v-for="(item, index) in tableColumns"
:key="index"
:prop="item.param"
:width="item.width ? item.width : ''"
:sortable="item.sortable ? true : false"
:label="item.label"
>
<!-- 因?yàn)橛行﹨?shù)需要判定比如性別所以判斷一下 -->
<template slot-scope="scope">
<span v-if="item.render">
{{ item.render(scope.row) }}
</span>
<span v-else>{{ scope.row[item.param] }}</span>
</template>
</el-table-column>
<!-- 操作 -->
<el-table-column
v-if="tableOption.label"
:label="tableOption.label"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
v-for="(item, index) in tableOption.options"
:key="index"
:type="item.type"
:icon="item.icon"
@click="handleButton(item.methods, scope.row, scope.$index)"
size="mini"
>
{{ item.label }}
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 表格結(jié)束 -->
<!-- 翻頁 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="rows"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
JS 和 CSS
<script>
export default {
props: {
loading: {
// 預(yù)加載
type: Boolean,
default: false
},
tableData: {
// 表格數(shù)據(jù)
type: Array,
default: () => {
return [];
}
},
tableColumns: {
// 表頭數(shù)據(jù)
type: Array,
default: () => {
return [];
}
},
tableOption: {
// 表格操作
type: Object,
default: () => {
return {};
}
},
page: {
// 當(dāng)前頁
type: Number,
default: () => {
return 1;
}
},
rows: {
// 當(dāng)前頁展示數(shù)
type: Number,
default: () => {
return 20;
}
},
total: {
// 總數(shù)
type: Number,
default: () => {
return 0;
}
}
},
methods: {
// 切換當(dāng)前一頁展示多少條
handleSizeChange(val) {
this.$emit("sizeChange", val);
},
// 翻頁
handleCurrentChange(val) {
this.$emit("pageChange", val);
},
// 按鈕點(diǎn)擊事件
// methods方法名 row當(dāng)前點(diǎn)擊列數(shù)據(jù) index當(dāng)前點(diǎn)擊的index
handleButton(methods, row, index) {
this.$emit("clickButton", { methods: methods, row: row, index: index });
},
// 點(diǎn)擊排序
handleSortChange(val) {
this.$emit("sortChange", val);
}
}
};
</script>
<style lang="less">
.table {
margin-top: 10px;
}
.el-table {
margin: 10px 0;
& td,
& th {
text-align: center;
}
}
.el-pagination {
text-align: right;
}
</style>
使用組件方法
1.先引入組件
// 我是配置好了components 沒配置的url則是 @/components/table
import Table from "components/table";
2.模板中使用組件
<Table
:tableData="tableData"
:tableColumns="tableLabel"
:page="page"
:rows="rows"
:total="total"
:loading="loading"
:tableOption="tableOption"
@sizeChange="sizeChange"
@pageChange="pageChange"
@clickButton="clickButton"
@sortChange="sortChange"
></Table>
3.對應(yīng)data數(shù)據(jù)
data() {
return() {
loading: false,
page: 1,
rows: 20,
total: 100,
// 表頭數(shù)據(jù)
tableLabel: [
{
label: "姓名",
param: "name"
},
{
label: "性別",
param: "sex",
render: row => {
if (row.sex === 0) {
return "女";
} else if (row.sex === 1) {
return "男";
}
}
},
{
label: "地點(diǎn)",
param: "address"
},
{
label: "時(shí)間",
sortable: true,
param: "date"
}
],
// 表格操作
tableOption: {
label: "操作",
options: [
{
label: "刪除",
type: "danger",
icon: "el-icon-delete",
methods: "del"
}
]
},
// 表格數(shù)據(jù)
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀區(qū)金沙江路 1518 弄",
sex: 0
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀區(qū)金沙江路 1517 弄",
sex: 1
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀區(qū)金沙江路 1519 弄",
sex: 0
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀區(qū)金沙江路 1516 弄",
sex: 1
}
]
}
}
3.使用組件對應(yīng)方法
methods: {
// 切換當(dāng)前一頁展示多少條
sizeChange(val) {
this.rows = val;
console.log(`每頁 ${val} 條`);
},
// 翻頁
pageChange(val) {
this.page = val;
console.log(`當(dāng)前頁: ${val}`);
},
// 點(diǎn)擊事件
clickButton(val) {
// 調(diào)用事件
this[val.methods](val.row);
},
// 排序
sortChange(val) {
console.log(val);
},
del(val) {
// 我是刪除
console.log(val);
}
}
最后附上成品圖
二次封裝表格組件
可能是我顯示有點(diǎn)問題锄贷。我這邊看不到邊框晨继。不過影響不大耳鸯。
