element-ui的表格组件二次封装成可复用的组件

<template>
    <div class="new_table">
        <div class="table_main">
            <el-table
                ref="singleTable"
                :data="tableData"
                highlight-current-row
                @current-change="handleCurrentChange"
                style="width: 100%">
                   <template v-for="(col,index) in tableOption.columns">
                        <template v-if="col.type == 'selection'">
                            <el-table-column type="selection" :key='index' ></el-table-column>
                        </template>
                        <template v-if="col.type == 'index'">
                            <el-table-column type="index" :key='index' :label="col.label?col.label:'编号'" :width="col.width?col.width:100"></el-table-column>
                        </template>
                        <template v-if="col.type == 'text'">
                            <template v-if='col.render?true:false'>
                                <el-table-column               
                                    :key="index"
                                    :show-overflow-tooltip="!!col.overflow"
                                    :prop="col.prop"
                                    :label="col.label"
                                    :width="col.width?col.width:''">
                                    <template slot-scope="scope">
                                        <table-render :render="col.render" :scope="scope" :prop="col.prop">                    
                                    </table-render>
                            </template>
                                </el-table-column>
                            </template>
                            <template v-else>
                                <el-table-column
                                    :key="index"
                                    :show-overflow-tooltip="!!col.overflow"
                                    :prop="col.prop"
                                    :label="col.label"
                                    :width="col.width?col.width:''">
                                </el-table-column>
                            </template>
                        </template>
                         <template v-if="col.type == 'action'">
                            <el-table-column  :key='index' :label="col.label"   
                                :fixed="col.fixed ? 'right' : false"
                                :show-overflow-tooltip="!!col.overflow"      
                                :width="col.width?col.width:100">
                                <template slot-scope="scope" v-if="col.btns">         
                                    <div class="btn_action_img_box">
            	                        <img :src="btn.src"  v-for="(btn,i) in item.btns"         
                                            :title='btn.name'
            	                            @click="handleActionCommand(btn.click, scope,     
                                            $event)" :key="i"  class="btn_action_img"/>
                                    </div>
                                </template>
                            </el-table-column>
                        </template>
                   </template>                    
            </el-table>
        </div>
    </div>
</template>
<script>
export default{
    components: {
        TableRender: {
            render: function (h) {
                return this.render(
                    h,
                    this.scope.row[this.prop],
                    this.scope.row,
                    this.prop
                );
            },
            props: {
                render: null,
                scope: null,
                simple: {
                    type: Boolean,
                    default: false
                },
                prop: {
                    type: String,
                    default: ""
                }
            }
        }
    },
    props:{
        
    },
    data() {
      return {
        tableOption:{
           columns:[
                    {
                        type:'selection',                       
                    }, {
                        type:'index',                    
                    }, {
                        type:'text',  
                        prop:'date',
                        label:'日期'                  
                    }, {
                        type:'text',  
                        prop:'name',
                        label:'名字'                  
                    }, {
                        type:'text',  
                        prop:'address',
                        label:'地址',
                        render:this.addressRender                  
                    },
            ]
        }, 
        tableData: [{
          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 弄'
        }],
        currentRow: null
      }
    },

    methods: {
      handleActionCommand(func, scope, event) {
          event.stopPropagation();
          func?func(scope.row, event, scope.column,scope.$index):false;           
      },
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      addressRender(h, item, data) { //item是prop对应的值，data是对应的行数据
            return (
                <div>
                    <el-button type="info">{item}</el-button>
                </div>       
            );
      },
    }
}
</script>
<style  scoped>

</style>