element表格(table)的二次封装

element的这个ui框架其实已经满足了大部分需求，个人感觉比较好用。那么，为什么需要再次进行二次封装呢？其实，在项目中很多页面或者是某个功能基本类似的，那么就可以单独封装成一个公共的组件，把需要的值传出来。然后把这个公共的组件引入需要的父组件里。在传入想要的值（数据），这样开发效率会提升很多。

又啰嗦！

代码示例：
公共组件（定义为mTable）

<template>
	<div>
		<el-table
		  :data="tableData"
		  style="width: 100%" 
		  border
		  :height= "height"
		  :empty-text="emptyText"
		  >

	// table的第一列是判断是否为序号（index）或者是选择框(selection)
		  <el-table-column
		  v-if="index"
		  width="55"
		  type="index"
		  align="center">
		  </el-table-column>
		  <el-table-column
		  v-if="selection"
		  width="55"
		  type="selection"
		  align="center">
		  </el-table-column>


	// 表头数据
		  <el-table-column
		  	v-for="(item,index) in tableConfigArr" :key="index"
		    :prop="item.prop"
		    :label="item.label"
		    :width="item.width"
			:fixed="item.fixed"
			align="center">
		  </el-table-column>
	// 表格操作项，使用scope.row拿到当前行的数据
		  <el-table-column label="操作" prop="actions" width="180" align="center">
			  <template slot-scope="scope">
				  <el-button type="primary" size="small" @click="check(scope.row)">查看</el-button>
				  <el-button type="danger" size="small" @click="edit(scope.row)">编辑</el-button>
			  </template>
		  </el-table-column>
		</el-table>
	</div>
	<div>
		<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
	</div>
</template>

  <script>
	  /* 
	  data:表格数据源；
	  height:该表格的高度 如果该高度有值 则会固定表头；
	  border：是否需要边框；
	  empty-text：空数据时显示的文本内容->暂无数据；
	  */
    export default {
      data() {
        return {
			
        }
      },
	  props:{
	  // 是否显示序号（index）/ 选择框（selection）
		  index:{
			  type:Boolean,
			  default:false
		  },
		  selection:{
			  type:Boolean,
			  default:false
		  },
		
		// 表格数据
		  tableData: {
			  type:Array
		  },
		// 表头数据
		  tableConfigArr:{
			  type:Array
		  },
		// 表头高度
		  height:{
			  type:String,
			  default:'484'
		  },
		// 当表格无数据的时候表格内显示暂无数据
		  emptyText:{
			  type:String,
			  default:"暂无数据"
		  },
		  page: {
      		type: Number
    	 },
    	 size: {
      		type: Number
    	 },
    	total: {
      		type: Number
    	},
	  },
	  methods:{
		  check(row){
			  console.log(row,"打开查看")
		  },
		  edit(row){
			  console.log(row,"打开编辑")
		  }
	  }
    }
  </script>
  <style>
  </style>

父组件
代码示例：

<template>
	<div id="app">
		<div class="table-container" >
			<myTable :tableData="tableData" :tableConfigArr='tableConfigArr' :selection="true"></myTable>
			<div class="pageFlex">
				<Pagination :page='page' :size='size'
					:total='total' 
					@handleSizeChange='handleSizeChange'
					@handleCurrentChange='handleCurrentChange'></Pagination>	 		 
			</div>
		</div>
		
		
	</div>
</template>

<script>
import myTable from '@/components/mTable.vue';
export default {
	name: 'app',
	components: {
		myTable
	},
	data() {
		return {
			page: 1,
			size: 10,
			total: 100,
			tableData: [ {
			          date: '2016-05-04',
			          name: '王小虎',
			          address: '上海市普陀区金沙江路 1517 弄'
			        }, {
			          date: '2016-05-01',
			          name: '王小虎',
			          address: '上海市普陀区金沙江路 1519 弄'
			        }, {
			          date: '2016-05-03',
			          name: '王小虎',
			          address: '上海市普陀区金沙江路 1516 弄'
			        },{
			          date: '2016-05-02',
			          name: '王小虎',
			          address: '上海市普陀区金沙江路 1518 弄'
			        }, {
			          date: '2016-05-04',
			          name: '王小虎',
			          address: '上海市普陀区金沙江路 1517 弄'
			        }, {
			          date: '2016-05-01',
			          name: '王小虎',
			          address: '上海市普陀区金沙江路 1519 弄'
			        }, {
			          date: '2016-05-03',
			          name: '王小虎',
			          address: '上海市普陀区金沙江路 1516 弄'
			        }, {
			          date: '2016-05-03',
			          name: '王小虎',
			          address: '上海市普陀区金沙江路 1516 弄'
			        }, {
			          date: '2016-05-03',
			          name: '王小虎',
			          address: '上海市普陀区金沙江路 1516 弄'
			        }],
			tableConfigArr:[
				{
				    fixed: false,
				    prop: 'date',
				    label: '日期',
				    width: 120
				},
				{
				    fixed: false,
				    prop: 'name',
				    label: '姓名',
				    width: 120
				},
				{
				    fixed: false,
				    prop: 'address',
				    label: '地址',
				    width: 240
				},
				{
				    fixed: false,
				    prop: 'date',
				    label: '日期',
				    width: 120
				},
				{
				    fixed: false,
				    prop: 'name',
				    label: '姓名',
				    width: 120
				},
				{
				    fixed: false,
				    prop: 'address',
				    label: '地址',
				    width: 240
				}
			]
		};
	},
	methods: {
		handleSizeChange(e){
			console.log(e)
			this.size = e
		},
		handleCurrentChange(e){
			console.log(e)
			this.page = e
		}
	}
};
</script>

<style>
#app {
	font-family: 'Avenir', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #2c3e50;
	margin-top: 60px;
}
.table-container{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-items: center;
				
}
.table-container>.pageFlex{
	align-items: center;
}
</style>

最终展示效果

注意，里面逻辑是随便写的，具体看真正需要传的值。
其实封装的主要想法是通过props传值接收，以及$emit将值传到父组件