二次封装element-ul table

二次封装element-ui table可以让我们更加方便快捷地使用表格组件，提高开发效率和代码可复用性。以下是一个简单的二次封装element-ui table的示例：

<template>
  <el-table v-bind="$attrs" v-on="$listeners" :data="tableData" :row-key="getRowKey" :default-sort="{prop: 'id', order: 'descending'}">
    <el-table-column type="index" label="序号"></el-table-column>
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="gender" label="性别"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column fixed="right" label="操作">
      <template slot-scope="scope">
        <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'MyTable',
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    getRowKey: {
      type: Function,
      default: row => row.id
    }
  },
  methods: {
    handleEdit(row) {
      this.$emit('edit', row);
    },
    handleDelete(row) {
      this.$emit('delete', row);
    }
  }
}
</script>

在上面的代码中，我们将element-ui table组件进行了二次封装，并提供了以下自定义属性和方法：

- tableData：表格数据
- getRowKey：获取行数据的key值，默认取id字段
- handleEdit：编辑行数据的方法
- handleDelete：删除行数据的方法

通过这种方式，我们可以在多个页面或组件中复用这个自定义的表格组件，并且只需要传入不同的数据和自定义方法即可。