vue封装element-ui的表格
# Table.vue
src/components/Tabel.vue
<template>
<div>
<el-table
ref="table"
:data="data"
border
stripe
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column v-if="selection" type="selection" width="55">
</el-table-column>
<el-table-column
:prop="item.key"
:label="item.title"
:width="item.width"
v-for="item in columns"
:key="item.key"
align="center"
>
<template slot-scope="scope">
<slot
v-if="$scopedSlots[item.key]"
:name="item.key"
:data="scope.row"
>
</slot>
<span v-else>{{ scope.row[item.key] }}</span>
</template>
</el-table-column>
<el-table-column label="操作" :width="operationWidth" v-if="operation">
<template slot-scope="scope">
<slot name="operation" :index="scope.$index" :data="scope.row">
</slot>
</template>
</el-table-column>
</el-table>
<div class="pagination" v-if="pagination">
<el-pagination
@size-change="handleSize"
@current-change="handleCurrent"
:current-page="page2"
:page-sizes="sizes"
:page-size="size2"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</div>
</template>
<script>
export default {
name: "index",
props: {
// 表格数据
data: {
type: Array,
default: function() {
return [];
}
},
// 表格列
columns: {
type: Array,
default: function() {
return [];
}
},
// 多选开关
selection: {
type: Boolean,
default: function() {
return false;
}
},
// 操作列显示/隐藏
operation: {
type: Boolean,
default: function() {
return false;
}
},
// 操作列宽度
operationWidth: {
type: Number,
default: function() {
return "";
}
},
// 分页显示/隐藏
pagination: {
type: Boolean,
default: function() {
return false;
}
},
// 页数大小数组
sizes: {
type: Array,
default: function() {
return [10, 20, 50, 100, 200, 500];
}
},
// 分页显示多少条信息
size: {
type: Number,
default: function() {
return 10;
}
},
// 当前页
page: {
type: Number,
default: function() {
return 1;
}
},
// 总共多少条
total: {
type: Number,
default: function() {
return 0;
}
}
},
data() {
return {
// 分页显示多少条
size2: this.size,
// 页数
page2: this.page
};
},
mounted() {},
methods: {
/**
* @description: 多选结果集合
* @author: chenbz
* @date: 2021/4/15
*/
handleSelectionChange(val) {
this.$emit("handleSelectionChange", val);
},
/**
* @description: 改变了分页大小
* @author: chenbz
* @date: 2021/4/25
*/
handleSize(size) {
this.page2 = 1;
this.size2 = size;
let data = {
page: this.page2,
size: size
};
this.$emit("handlePagination", data);
},
/***
* @description: 改变了分页页数
* @author: chenbz
* @date: 2021/4/25
*/
handleCurrent(current) {
this.page2 = current;
let data = {
page: current,
size: this.size2
};
this.$emit("handlePagination", data);
}
}
};
</script>
<style scoped>
.pagination {
margin: 20px 0;
}
</style>
# 页面引入
src/views/test.vue
<template>
<div>
<h2>测试中心</h2>
<el-divider></el-divider>
<MyTable
:data="table.data"
:columns="table.columns"
:pagination="true"
:total="table.total"
@handlePagination="handlePagination"
>
</MyTable>
</div>
</template>
<script>
import MyTable from "@/components/Table.vue";
export default {
name: "test",
components: {
MyTable
},
data() {
return {
table: {
data: [
{
id: 1,
date: "2016-05-04",
name: "王小虎1",
address: "上海市普陀区金沙江路 1518 弄"
},
{
id: 2,
date: "2016-05-04",
name: "王小虎2",
address: "上海市普陀区金沙江路 1517 弄"
},
{
id: 3,
date: "2016-05-01",
name: "王小虎3",
address: "上海市普陀区金沙江路 1519 弄"
},
{
id: 4,
date: "2016-05-03",
name: "王小虎4",
address: "上海市普陀区金沙江路 1516 弄"
}
],
columns: [
{
title: "时间",
key: "date",
width: 250
},
{
title: "名字",
key: "name"
},
{
title: "地址",
key: "address"
}
],
total: 500,
index: ""
}
};
},
mounted() {},
methods: {
// 改变了分页
handlePagination(val) {
console.log(val);
}
}
};
</script>
<style scoped></style>
# 自定义操作栏
<template>
<div>
<h2>测试中心</h2>
<el-divider></el-divider>
<MyTable
:data="table.data"
:columns="table.columns"
:operation="true"
:operationWidth="200"
:pagination="true"
:total="table.total"
@handlePagination="handlePagination"
>
<template slot="operation" slot-scope="scope">
<el-button
size="small"
type="primary"
@click="handleEdit(scope.index, scope.data)"
plain
>
编辑
</el-button>
<el-popconfirm
title="这是一段内容确定删除吗？"
@confirm="handleDelete(scope.index, scope.data)"
>
<el-button
size="small"
type="danger"
slot="reference"
class="ml-2"
plain
>
删除
</el-button>
</el-popconfirm>
</template>
</MyTable>
</div>
</template>
<script>
import MyTable from "@/components/Table.vue";
export default {
name: "test",
components: {
MyTable
},
data() {
return {
table: {
data: [
{
id: 1,
date: "2016-05-04",
name: "王小虎1",
address: "上海市普陀区金沙江路 1518 弄"
},
{
id: 2,
date: "2016-05-04",
name: "王小虎2",
address: "上海市普陀区金沙江路 1517 弄"
},
{
id: 3,
date: "2016-05-01",
name: "王小虎3",
address: "上海市普陀区金沙江路 1519 弄"
},
{
id: 4,
date: "2016-05-03",
name: "王小虎4",
address: "上海市普陀区金沙江路 1516 弄"
}
],
columns: [
{
title: "时间",
key: "date",
width: 250
},
{
title: "名字",
key: "name"
},
{
title: "地址",
key: "address"
}
],
total: 500,
index: ""
}
};
},
mounted() {},
methods: {
// 点击删除按钮
handleDelete(index, row) {
console.log(row);
this.table.data.splice(index, 1);
},
// 点击编辑按钮
handleEdit(index, row) {
console.log(index);
console.log(row);
},
// 改变了分页
handlePagination(val) {
console.log(val);
}
}
};
</script>
<style scoped></style>
使用
template包含自定义操作列的内容，slot一定要operation，slot-scope会接收两个对象，分别是index,data
# 自定义列
<MyTable
:data="table.data"
:columns="table.columns"
:total="table.total"
>
<template slot="date" slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.data.date }}</span>
</template>
</MyTable>
使用
template包含自定义的内容，slot一定要对应好字段，slot-scope会接收对象，使用scope.data.属性调用
# 参数说明
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| data | 表格数据 | Array | [] |
| columns | 表格列 | Array | [] |
| selection | 多选开关 | Boolean | false |
| operation | 操作列显示/隐藏 | Boolean | false |
| operationWidth | 操作列宽度 | Number | “” |
| pagination | 分页显示/隐藏 | Boolean | false |
| sizes | 页数大小数组 | Array | [10, 20, 50, 100, 200, 500] |
| size | 分页显示多少条信息 | Number | 10 |
| page | 当前页 | Number | 1 |
| total | 总共多少条 | Number | 0 |
# columns
| 属性 | 描述 | 必须 |
|---|---|---|
| title | 列表头 | 是 |
| key | 列对应的字段 | 是 |
| width | 列宽度 | 否 |
# 方法
| 属性 | 描述 | 回调函数 |
|---|---|---|
| @handleSelectionChange | 多选结果集合 | (val) |
| @handlePagination | 改变了分页 | (val) |
# 效果图
扫一扫
2801
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
