element el-table的封装以及使用

1、封装table.vue组件

<template>
	<div>
		<el-table
			:data='tableData'>
				  <!--多选列-->
			     <el-table-column
	                        v-if='selectionShow'
	                        type="selection"
	                        width="50"
	                        align="center"
	                        highlight-current-row>
	             </el-table-column>
	             <!--自定义添加排序列-->
                <el-table-column
                        v-if='indexShow'
                        align="center"
                        :label="indexLabel"
                        :width="indexWidth">
                    <template slot-scope="scope">
                    	<span>{{scope.$index + 1}} </span>
                    </template>
                </el-table-column>
				<el-table-column
                        v-for="(item, index) in tableHead"
                        :header-align="item.headerAlign"
                        :align="item.align"
                        :key="index"
                        :fixed="item.fixed"
                        :width="ColumnWidth(item)"
                        :prop="item.prop"
                        :label="item.label"
                        :sortable="item.sortable" >
                        <div class="showTable" style="min-height: 20px;">
                                <div 
                                :title="scope.row[item.prop]"
                                 v-html="normalFormatter(item.prop,scope.row[item.prop],item)">{{scope.row[item.prop]}}</div>
                            </div>
               </el-table-column>        
		</el-table>
	</div>
</template>

<script>
	export default {
		props:{
			indexShow: Boolean, // 是否显示排序列
            selectionShow: Boolean, // 是否显示多选列
            indexLabel: null, // 排序列名称
            indexWidth: null, // 排序列宽度
            tableHead: Array,  // 表头数据
            tableData: Array, // 表格数据
		},
		data(){
			return{
				
			}
		},
		 watch: {
		    // 监听表格数据
		 	tableData: {
		 		handler(val, oldVal) {
		 			this.tableData= val
		 		}
		 	},
		 	// 监听表头数据
		 	tableHead: {
		 		handler(val, oldVal) {
		 			this.tableHead= val
		 		}
		 	}
		 }

	}
</script>

2、使用table.vue组件
在新建一个tableDemo.vue文件使用，table.vue组件

<template>
	<div>
		<new-table 
			:tableData="tableData"
            :tableHead="tableHead" 
             :selectionShow=true
             :indexShow=true
             indexLabel="序号"
             indexWidth="50">
		</new-table>
	</div>
</template>
<script>
	export default {
		data(){
			return{
				// 表头数据
                tableHead:[
                    {
                        width: 150,
                        label: '日期',
                        prop: 'date',
                        align: 'right',   // 列对齐方式
                        headerAlign:'center',   // 列头对其方式
                        fixed: false,  // 列是否固定
                        filterShow: true,  //  是否开启过滤
                        sortable: true, //是否开启排序
                    },
                    {
                        width: 150,
                        label: '姓名',
                        prop: 'name',
                        align: 'left',
                        headerAlign:'center',
                        fixed: false,
                        filterShow: true,
                        sortable: true
                    },
                    {
                        width: 250,
                        label: '地址',
                        prop: 'address',
                        align: 'left',
                        headerAlign:'center',
                        fixed: false,
                        sortable: true
                    }
                  }
                ],
                // 表格基础数据
                tableData:[
                	{
			            date: '2016-05-02',
			            name: '王小虎',
			            address: '上海市普陀区金沙江路 1518 弄'
			          }, {
			            date: '2016-05-04',
			            name: '王小虎',
			            address: '上海市普陀区金沙江路 1517 弄'
			          }, {
			            date: '2016-05-01',
			            name: '王小虎',
			            address: '上海市普陀区金沙江路 1519 弄'
			          },
                ],
			}
		}
	}
</script>