element-ui 如何把表格的操作封装成可配置项来使用

效果如下：
表格的操作列变成可配置项
给每个操作列按钮添加方法，加图标，可以根据状态控制按钮的显示、隐藏

1、新建一个table.vue组件
请参考 element el-table的封装以及使用

<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-column
                        align="center"
                        v-if="buttonListShow"
                        :fixed="addBtnList.fixed"
                        :label=addBtnList.label
                        :min-width="addBtnList.width">
                    <template slot-scope="scope">
                        <el-button
                                v-for="(item,index) in addBtnList.list"
                                :key="index"
                                v-show="exchangeBtn(item.showBtn,scope)"
                                @click="clkCall(item.methods,scope)"
                                type="text"
                                size="small" :title="item.title">
                            <i class="add-btn-i" :class="item.icon" style="color:#3877D6"></i>
                            <span style="color:#3877D6">{{item.title}}</span>
                        </el-button>
                    </template>
                </el-table-column>
		</el-table>
	</div>
</template>
<script>
	export default {
		props:{
			indexShow: Boolean, // 是否显示排序列
            selectionShow: Boolean, // 是否显示多选列
            indexLabel: null, // 排序列名称
            indexWidth: null, // 排序列宽度
            tableHead: Array,  // 表头数据
            tableData: Array, // 表格数据
            addBtnList: null,  // 操作列配置项
            buttonListShow: Boolean,   // 是否显示操作列
		},
		data(){
			return{
				
			}
		},
		 watch: {
		    // 监听表格数据
		 	tableData: {
		 		handler(val, oldVal) {
		 			this.tableData= val
		 		}
		 	},
		 	// 监听表头数据
		 	tableHead: {
		 		handler(val, oldVal) {
		 			this.tableHead= val
		 		}
		 	}
		 },
		 mounted(){
		 	this.initData()
		 },
		 methods:{
		   // 判断操作列按钮显示、隐藏
            exchangeBtn(itemshowBtn,scope){
                if(eval(itemshowBtn)){
                    return true
                }
            },
			// 操作列 按钮方法
            clkCall(methodsWords,scope) {
                let el = event.currentTarget;
                this.$emit('clkCallBk', methodsWords,scope,el)
                // console.log(el)
            },
		} 
		
	}
</script>

2、使用组件
新建一个tableDemo.vue页面
请参考 element el-table的封装以及使用
代码如下：

<template>
	<div>
		<new-table 
			:tableData="tableData"
            :tableHead="tableHead" 
             :selectionShow=true
             :indexShow=true
             indexLabel="序号"
             indexWidth="50"
             :buttonListShow=true
             :addBtnList="addBtnList"
             @clkCallBk="listenCall">
		</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 弄'
			          },
                ],
                buttonListShow: true,  // 是否显示操作列
                // 操作列数据
                addBtnList: {
                    label: '操作',
                    width: 200,
                    list: [
                        {
                            title: '查看',  
                            icon: 'el-icon-circle-plus-outline',
                            methods: 'check',  // 按钮方法
                            showBtn: true  // 是否显示按钮
                        },
                        {
                            title: '编辑',
                            icon: 'el-icon-edit',
                            methods: 'edit',
                            showBtn: true
                        },
                        {
                            title: '删除',
                            icon: 'el-icon-delete',
                            methods: 'del',
                            showBtn: 'scope.row.IsAudit==1?true:false'  // 根据表格状态显示隐藏按钮
                        }
                    ]
                }
			}
		},
		methods:{
			// 操作列按钮方法
            listenCall(methodsWords,scope,el) {
                console.log('methodsWords', methodsWords,scope,el)
                this[methodsWords](scope,el)
            },
            // 调用查看方法
            check(scope,el) {
                console.log(scope,el)
                alert('查看')
            },
             // 调用编辑方法
            edit(scope,el) {
                console.log(scope,el)
                alert('编辑')
            },
             // 调用删除方法
            del(scope,el) {
                console.log(scope,el)
                alert('删除')
            },
		}
		
	}
</script>