前言

众所周知 封装是为了偷懒。一个后台管理系统中几乎每个页面都是表格，每次都要写<el-table>、<el-table-column>等标签，而且每个使用table组件都要写很多相同的方法selection-change和cell-click等，以及还有一些翻页的方法，感觉好繁琐而且没必要，所以这次封装了一个table共用组件。

代码

<template>
<div>
    <el-table
        :data="tableData"
        height="300"
        border
        style="width: 100%"
        @cell-click="cellClick"
        @selection-change="handleSelectionChange">
        <el-table-column v-if="isNeedSelection" type="selection" width="55" />
         <el-table-column v-for="item in tableHeadTitles" :prop="item.key" :label="item.text" :width="item.width" :key="item.key" >
            <template slot-scope="scope">
                <span v-if="item.formatter">{{ item.formatter(scope.row[item.key]) }}</span>
                <span v-else>{{scope.row[item.key]}}</span>
            </template>
        </el-table-column>
        <el-table-column v-if="isDisplayAction" fixed="right" label="操作" :width="actionWidth">
        <template slot-scope="{row, $index}">
            <slot :RowInfo="{row, $index}"></slot>
        </template>
        </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNation.pageIndex"
      :page-sizes="[10, 15, 20, 30]"
      :page-size="pageNation.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageNation.total">
    </el-pagination>
</div>
  
</template>

<script>
export default {
	// 这里看实际需要增加或减少属性
    props: {
        isDisplayAction: { // 是否需要操作栏
            type: Boolean,
            default: true
        },
        actionWidth: { // 操作栏宽度
            type: Number,
            default: 130
        },
        isNeedSelection: { // 是否需要多选
            type: Boolean,
            default: false
        },
        tableHeadTitles: { // 表格字段
            type: Array,
            required: true
        },
        url: { // 封装好的接口url
            type: Function,
            required: true
        },
        queryParams: { // 查询参数
            type: Object,
            required: true
        },
        pageInfo: {
            type: Object,
            default: function () {
                return {
                    pageIndex: 1,
                    pageSize: 10,
                    total: 0
                };
            }
        }
    },
    data() {
        return {
            pageNation: this.pageInfo,
            tableData: [],
        };
    },
    methods: {
        // 点击单元格
        cellClick(row, column, cell, event) {
            this.$emit('cell-click', row, column);
		},
        // 多选
        handleSelectionChange(val) {
            this.$emit('handle-selection-change', val);
        },
        // 切换条数
        handleSizeChange(val) {
            this.pageNation.pageIndex = 1;
            this.pageNation.pageSize = val;
            this.getTableDate();
        },
        // 切换页数
        handleCurrentChange(val) {
            this.pageNation.pageIndex = val;
            this.getTableDate();
        },
        getTableDate() {
            try {
                if (!this.url) {
                    return console.error('url is required');
                }
                if (Object.keys(this.queryParams).length === 0) {
                    return console.error('queryParams is required');
                }
                const $API = this.url;
                const params = {
                    ...this.queryParams,
                    pageIndex: this.pageNation.pageIndex,
                    pageSize: this.pageNation.pageSize
                };
                $API(params).then(res => {
                    this.tableData = res.data;
                    this.pageNation.total = res.total;
                });
            } catch(e) {
                console.log('e!!!', e);
            }
        }
    }
};
</script>

父组件中使用方法：

<my-table ref="myTable" :table-head-titles="tableHeadTitles" :url="url" :query-params="queryParams">
    <template v-slot:default="{RowInfo}">
        <el-button type="text" @click="editRow(RowInfo)">编辑</el-button>
        <el-button type="text" @click="deleteRow(RowInfo)">删除</el-button>
        <el-button type="text">完成</el-button>
    </template>
</my-table>

// title.js
const formatStatus = function (value) {
  if (value === 1) return '审核中';
  if (value === 2) return '退回';
  if (value === 3) return '审核通过';
};
const titleAttay = [
  { key: 'remark', text: '备注', width: 140 },
  { key: 'createTime', text: '创建时间', width: 140 },
  { key: 'modifierTime', text: '更新时间', width: 140 },
  { key: 'creater', text: '创建人' },
  { key: 'modifier', text: '更新人' },
  { key: 'status', text: '状态', formatter: formatStatus }, // 格式化
];
export {
  titleAttay
};

// js
import { titleAttay } from './thead_title';
...
data(){
	return {
	 titleAttay: titleAttay 
},
  computed: {
      queryParams() {
          return {
              data: { ...this.form }
          };
      }
  },
methods: {
	editRow({ row }) { // 解构
       console.log(row);
   },
   // 查询使用方法
   search() {
		this.$refs['myTable'].getTableDate();
	}
}