表格组件二次封装（vue-elementui）

TableVue组件

<template>
  <!--  table再组件化-->
  <!-- 通过v-bind="$attrs" v-on="$listeners"，把父组件传的属性全部绑定到子组件上，保证了api和el-table一致 -->
  <el-table style="width: 100%" v-bind="$attrs" v-on="$listeners" border >
    <!-- 多选框   -->
<!--    <el-table-column type="selection" width="55"></el-table-column>-->
    <!-- :scope是绑定的动态属性，可以起任意喜欢的名字，但要注意在父组件中获取数据时key要对应 -->
    <el-table-column v-for="(item, index) in columns" :key="index" v-bind="item.attrs">
      <el-table-column type="selection" v-if="item.type==='selection'" width="55" />
      <template slot-scope="scope" >
        <slot :scope="scope" :name="item.slot" v-if="item.slot"></slot>
        <template v-else>
          {{scope.row[item.attrs.prop]}}
        </template>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style scoped>
  .el-table{
    margin-top: 10px;
  }
</style>

在父组件引入

html部分：

 <!--引入表格组件        -->
 <TableVue v-loading="loadingTable" :columns="columns" :data="list" empty-text="暂无数据">
     <!-- #是v-slot的简写，{scope: {row, $index}}是属性对象slot双重解构，注意这里的scope要与子组件插槽绑定的属性名对应 -->
     <template #handle="{scope: {row, $index}}">
       <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(row)">编辑</el-button>
       <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(row, $index)">删除</el-button>
     </template>
   </TableVue>

js部分：

import TableVue from '@/components/TableVue'
export default {
  components: { TableVue },
  data() {
    return {
    }
  }
}

export default {data(){return{ }}}里面

loadingTable: false,
list: [],
columns: Object.freeze([
    { attrs: { prop: 'communityName', label: '小区', width: '140', align: 'center', 'show-overflow-tooltip': true }},
    { attrs: { prop: 'buildingName', label: '栋', width: '100', align: 'center', 'show-overflow-tooltip': true }},
    { slot: 'handle', attrs: { label: '操作', width: '120', 'class-name': 'small-padding fixed-width', align: 'center' }}
])

methods:{}里面：

// 按编辑按钮，弹出对话框
    handleUpdate(row) {
      this.dialogVisible = true
      this.isEdit = true
      this.editInfo = Object.assign({}, row)
    },
handleDelete(row) {
      console.log(row)
      this.query.communityId = row.communityId
      this.query.buildingId = row.buildingId
      this.query.unitId = row.unitId
      this.query.residentId = row.id
      const query = this.query
      this.$confirm('是否确认删除"' + row.residentName + '"的住户信息?', '警告',
        { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
      ).then(function() {
        return delResident(query)
      }).then((res) => {
        this.getList()
        this.$message({
          message: res.message,
          type: res.code === 2000 ? 'success' : 'error'
        })
      }).catch(function() {
      })
    },

按编辑按钮出现的弹出框自己写，或者参考下面的（这个是另外写的组件，编辑和新增共用了同一个）。不了解的戳这里了解更多：vue-elementui新增编辑共用弹出框组件

<el-dialog :title="isEdit?'编辑住户信息':'添加住户信息'" :visible.sync="dialogVisible" :edit.sync="isEdit" width="700px">
   <new-dialog v-if="dialogVisible" :visible.sync="dialogVisible" :edit.sync="isEdit" :edit-info="editInfo" />
</el-dialog>