Table组件
因为正常需求来说表格都会带翻页，所以我就直接在一个组件里面做好了
<div class="table">
<!-- 表格开始 -->
<el-table
ref="table"
v-loading="loading"
element-loading-text="加载中"
:data="tableData"
border
stripe
style="width: 100%"
@sort-change="handleSortChange"
>
<!-- prop是对应列内容的字段名 width是对应列宽度 sortable是是否排序 label是对应列名称 -->
<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"
>
<!-- 因为有些参数需要判定比如性别所以判断一下 -->
<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>
<!-- 表格结束 -->
<!-- 翻页 -->
<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: {
// 预加载
type: Boolean,
default: false
},
tableData: {
// 表格数据
type: Array,
default: () => {
return [];
}
},
tableColumns: {
// 表头数据
type: Array,
default: () => {
return [];
}
},
tableOption: {
// 表格操作
type: Object,
default: () => {
return {};
}
},
page: {
// 当前页
type: Number,
default: () => {
return 1;
}
},
rows: {
// 当前页展示数
type: Number,
default: () => {
return 20;
}
},
total: {
// 总数
type: Number,
default: () => {
return 0;
}
}
},
methods: {
// 切换当前一页展示多少条
handleSizeChange(val) {
this.$emit("sizeChange", val);
},
// 翻页
handleCurrentChange(val) {
this.$emit("pageChange", val);
},
// 按钮点击事件
// methods方法名 row当前点击列数据 index当前点击的index
handleButton(methods, row, index) {
this.$emit("clickButton", { methods: methods, row: row, index: index });
},
// 点击排序
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.对应data数据
data() {
return() {
loading: false,
page: 1,
rows: 20,
total: 100,
// 表头数据
tableLabel: [
{
label: "姓名",
param: "name"
},
{
label: "性别",
param: "sex",
render: row => {
if (row.sex === 0) {
return "女";
} else if (row.sex === 1) {
return "男";
}
}
},
{
label: "地点",
param: "address"
},
{
label: "时间",
sortable: true,
param: "date"
}
],
// 表格操作
tableOption: {
label: "操作",
options: [
{
label: "删除",
type: "danger",
icon: "el-icon-delete",
methods: "del"
}
]
},
// 表格数据
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
sex: 0
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
sex: 1
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
sex: 0
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
sex: 1
}
]
}
}
3.使用组件对应方法
methods: {
// 切换当前一页展示多少条
sizeChange(val) {
this.rows = val;
console.log(`每页 ${val} 条`);
},
// 翻页
pageChange(val) {
this.page = val;
console.log(`当前页: ${val}`);
},
// 点击事件
clickButton(val) {
// 调用事件
this[val.methods](val.row);
},
// 排序
sortChange(val) {
console.log(val);
},
del(val) {
// 我是删除
console.log(val);
}
}
最后附上成品图
二次封装表格组件
可能是我显示有点问题。我这边看不到边框。不过影响不大。
