封装el-table表单组件，让你写增删改查更轻松

1.封装通用组件

<template>
  <el-table
      :data="tableData"
      style="width: 100%"
       @selection-change="handleSelectionChange"
      >
       <el-table-column
      type="selection"
      width="55">
      <el-table-column
        v-for="item in tableLabel"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        align="center"
        show-overflow-tooltip>
      </el-table-column>
      <template slot-scope="scope">
      // 根据需要封装更多
        <div v-if="item.type === 0">
          {{scope.row[item.prop]}}
        </div>
        <div v-if="item.type === 1">
          <span v-if="scope.row.sex === 0">女</span>
          <span v-if="scope.row.sex === 1">男</span>
        </div>
      </template>
      <slot class="btn"></slot>
  </el-table>
</template>
<script>
export default {
  name: 'tableCommon',
  props: {
    tableData: {
      type: Array
    },
    tableLabel: {
      type: Array
    }
  }
}
</script>

<style scoped>

</style>

2.挂载到全局

在main.js中

import tableCommon from '@/api/components/tableCommon'
Vue.component('tableCommon', tableCommon)

3.在组件中使用

  <tableCommon :tableData="tableData" :tableLabel="tableLabel" :handleSelectionChange="handleSelectionChange">
    <el-table-column
        label="操作"
        align="center"
        show-overflow-tooltip
        slot="btn"
        >
      <el-button></el-button>
    </el-table-column>
  </tableCommon>


  data() {
    return{
      tableData: [],
      tableLabel: [
        {type: 0, prop: 'name', label: '姓名'},
        {type: 0, prop: 'a', label: 'a'},
        {type: 0, prop: 'b', label: 'b'},
        {type: 0, prop: 'c', label: 'c'},
        {type: 1, prop: 'sex', label: '性别'},
      ]
    }
},
  methods: {
    handleSelectionChange() {}
  }