二次封装el-table

import { TableColumn } from "element-ui"

export default {

    name: 'MyTable',

    props: {
        columsConfig: {
            type: Array,
            default: ()=>{
                return [
                {
                    prop: 'name',
                    label: '姓名',
                },
                {
                    prop: 'date',
                    label: '日期',
                },
                {
                    prop: 'address',
                    label: '地址',
                }
            ]
            }
        },
        tableData:{
            type: Array,
            default: ()=>{
                return []
            }
        }
    },
    methods:{
        //多选
        handleSelectionChange(val){
            this.$emit('selection-change',val)
        }
    },
    render(h){
        return (
            <el-table
                data={this.tableData}
                border
                style="width: 100%"
                on-selection-change={this.handleSelectionChange}
                >
                    <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>
                    {
                        this.columsConfig.map(column => {
                            return (
                                <el-table-column
                                    fixed={column.fixed || false}
                                    prop={column.prop}
                                    label={column.label}
                                    width={column.width}
                                    show-overflow-tooltip={column.showOverflowTooltip || true}
                                    align={column.align || 'center'}
                                    header-align={column.headerAlign||'center'}
                                    sortable={column.sortable || false}
                                >
                                </el-table-column>
                            )
                        })
                    }
                    <el-table-column label="操作">
                        {this.$scopedSlots.default(
                            {
                                $index: 1,
                                scope: '传递参数效果类似于再slot上定义变量传递给父组件'
                            }
                        )}
                    </el-table-column>
                
            </el-table>
        )
    }
}

<template>
  <div id="app">
    <!-- <file-upload /> -->
    <my-table :tableData="dataList" @selection-change="handleSelectionChange">
      <template v-slot:default="props">
        <el-button
          size="mini"
          @click="handleEdit()">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(props)">删除</el-button>
      </template>
    </my-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      dataList: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, 
      ]
    }
  },
  methods: {
    //选中触发
    handleSelectionChange(val){
      console.log("选中的数组",val);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
}
</script>