element ui table 的再封装组件

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>