简单封装一个element table组件

最近写业务发现每个页面都会用到table组件，每次都要写一大堆代码很不方便，现在就简单封装一个基础功能，后面陆续完善。

components， 新建table.vue组件，代码如下：

<!--
 * @Description: 公共表格组件
 * @Author: yanghui
 * @Date: 2021-06-21 16:42:58
 * @LastEditTime: 2021-06-22 10:36:55
 * @LastEditors: yanghui
-->
<template>
  <div>
    <el-table :data="tableData" stripe border>
      <el-table-column
        label="序号"
        type="index"
        width="50px"
        align="center"
      />
      <template
        v-for="(item,index) in tableHeader"
      >
        <el-table-column
          :key="index"
          :width="item.width?item.width:'auto'"
          :min-width="item.minWidth"
          :prop="item.prop"
          :align="item.align?item.align:'center'"
          :label="item.label"
        >
          <template slot-scope="scope">
            <slot v-if="item.scopeStatus" :name="item.prop" :row="scope.row" />
            <template v-else>
              {{ scope.row[item.prop] }}
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'TableList',
  props: {
    tableData: {
      type: Array,
      default: function() {
        return []
      }
    },
    tableHeader: {
      type: Array,
      default: function() {
        return []
      }
    },
    tableLoading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {

  }
}
</script>

父组件引用：

<TableList :table-data="tableData" :table-header="tableHeader">
      <!-- 操作项 -->
      <template #operation>
        <el-button type="primary" size="mini" plain>编辑</el-button>
        <el-button type="danger" size="mini" plain>删除</el-button>
      </template>
</TableList>
// 引入
import TableList from '@/components/Table'
components: {
    TableList
},
// data
// 表格数据
      tableData: [
        {
          name: '张三',
          sex: '男'
        },
        {
          name: '李四',
          sex: '男'
        }
      ],
      // 表头数据
      tableHeader: [
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '性别',
          prop: 'sex'
        },
        {
          label: '操作',
          prop: 'operation',
          scopeStatus: true
        }
      ]

实现效果图：

简单实现一个table组件的封装，后续还需增加其他功能，持续更新中。。。