teble
描述
– 心血来潮,写一个基于element ui table 的再封装组件
用法
1.引入组件
import myTable from "@/components/table/index.vue
2.<template></template>
中引入标签
<my-table :columns="columns" :tableData="tableData" :options="tableOptions"
@selection-change="tableSelectionChange" @table-change="tableChange">
<el-table-column slot="operate" label="操作" fixed="right" width="100">
<template slot-scope="scope">
<el-button type="text" size="small" @click="details(scope.row)">详情</el-button>
<el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
</template>
</el-table-column>
</my-table>
– 操作按钮插槽,主要实现操作按钮自由化
– :columns=“columns” :传入表格的列
– :tableData=“tableData” :传入表格数据
– :options=“tableOptions” :传入表格的可选项(选择框)
– @selection-change=“tableSelectionChange” :选择框回调函数,返回选中的行数据
– @table-change=“tableChange” : 排序和分页参数回调,返回参数样式:{pageNum: 0,pageSize: 1,orderBy:’’,direction:’’}
3.传入参数样式
//表格内容
tableData:{
content:[{
id: "id1",
code: "code1",
name:"name1"
}, {
id: "id2",
code: "code2",
name:"name2"
}],
totalElements: 2
},
//表格的列
columns: [{
prop: "id",
label: "ID"
}, {
prop: "code",
label: "编码"
sortable : true //(sortable: true--排序(只会排序当前页面数据), false--不排序(默认),'custom'(定制,会重新查找数据库,进行排序))
}, {
prop: "name",
label: "名称"
}],
//表格可选项
tableOptions: {
//选择框
selection:true,
//是否斑马纹
stripe: true,
//是否有边框
border:true,
//是否分页
pagination:true,
},
/组件
<template>
<div class="content">
<div class="table">
<el-table :data="tableData.content"
@selection-change="handleSelectionChange"
@sort-change="handleSortChange"
:stripe="options.stripe"
:border="options.border">
<el-table-column v-if="options.selection"
type="selection"
fixed="left"></el-table-column>
<el-table-column v-for="(item,index) in columns"
:key="index"
:prop="item.prop"
:label="item.label"
:sortable="item.sortable"></el-table-column>
<!-- 具名插槽:主要放置操作按钮 -->
<slot name="operate"></slot>
</el-table>
</div>
<div class="pagination"
v-if="options.pagination && tableData && tableData.totalElements && tableData.totalElements>0">
<el-pagination background
layout="total,prev,pager,next,sizes"
:total="tableData.totalElements"
@size-change="handleSizeChange"
:page-size="tableData.pageSize"
:page-sizes="[1, 5, 10, 15, 20]"
@current-change="handleCurrentChange"
:current-page.sync="tableData.pageNum + 1">
</el-pagination>
</div>
</div>
</template>
<script>
var _self;
export default {
props: {
//table表格数据
tableData: {
type: Object, //指定传入的类型
default: function() { //这样可以指定默认的值
return {
content: [],
totalElements: 0
}
}
},
//列字段
columns: {
type: Array,
default: function() {
return []
}
},
//可选项
options: {
type: Object,
default: function() {
return {}
}
},
},
data() {
return {
tableParam: {}
};
},
created() {
_self = this;
_self.tableParam = {
pageNum: _self.tableData.pageNum,
pageSize: _self.tableData.pageSize
}
},
methods: {
//选择改变
handleSelectionChange(multipleSelection) {
_self.$emit("selection-change", multipleSelection);
},
// 页码大小
handleSizeChange(pageSize) {
_self.tableData.pageSize = pageSize;
_self.tableParam.pageSize = pageSize;
_self.$emit("table-change", _self.tableParam);
},
// 当前页码
handleCurrentChange(pageNum) {
_self.tableData.pageNum = pageNum - 1;
_self.tableParam.pageNum = pageNum - 1;
_self.$emit("table-change", _self.tableParam);
},
//排序监听
handleSortChange(sortParam) {
if (sortParam.order) {
_self.tableParam.orderBy = sortParam.prop;
_self.tableParam.direction = sortParam.order === "descending" ? "DESC" : "ASC";
_self.$emit("table-change", _self.tableParam);
};
}
},
};
</script>
<style scoped>
.pagination>.el-pagination {
position: absolute;
/* width: 450px; */
right: 15px;
}
</style>