项目中使用了Element UI的表格组件el-table，按照官方提供的写法，展示的列越多，代码量也就越大。如果是开发后台管理系统，需要用到统计的地方有很多。不把时间花在重复的工作上，封装el-table，作为组件引用，只需要少量的配置，就能极大的提高开发效率。
el-table需要面对的场景多种多样，业务不同，呈现出的样式也不同，根据使用的难易程度，把它分为：

• 1、显示数据从父视图传递，集成只需要一行代码的简易表格——<simpleTable>
• 2、集成需要配置请求接口、查询参数，有分页，组件内请求数据的表格—— <myTable>

一、simpleTable

<template>
  <div ref="table" >
    <el-table :show-summary="isShowSummary" v-if="!fixHeight" :header-cell-style="{background:headerBgColor}" :data="tableData" ref="multipleTable" border style="width: 100%;" @selection-change="handleSelectionChange">
      <el-table-column v-if="isShowSelection" type="selection" width="55" align="center"></el-table-column>
      <el-table-column type="index" align="center" label="序号" min-width="50" v-if="isShowSerialNumber"></el-table-column>
      <template v-for="k in props">
        <el-table-column v-if="k.fixw" :min-width="k.fixw" align="center" :prop="k.prop" :label="k.label" :sortable="k.sort ? true : false">
          <slot :name="k.prop" :data="scope.row" slot-scope="scope">{{scope.row[k.prop]}}</slot>
        </el-table-column>
        <el-table-column v-else align="center" :prop="k.prop" :label="k.label" :sortable="k.sort ? true : false">
          <slot :name="k.prop" :data="scope.row" slot-scope="scope">{{scope.row[k.prop]}}</slot>
        </el-table-column>
      </template>
      <el-table-column align="center" :fixed="fixedType?'right':fixedType" label="操作" v-if="isShowOperation">
        <slot name="operation" :data="scope.row" slot-scope="scope"></slot>
      </el-table-column>
    </el-table>

    <el-table v-else :height="tableH" :show-summary="isShowSummary" :header-cell-style="{background:headerBgColor}" :data="tableData" ref="multipleTable" border style="width: 100%;" @selection-change="handleSelectionChange">
      <el-table-column v-if="isShowSelection" type="selection" width="55" align="center"></el-table-column>
      <el-table-column type="index" align="center" label="序号" min-width="50" v-if="isShowSerialNumber"></el-table-column>
      <template v-for="k in props">
        <el-table-column v-if="k.fixw" :min-width="k.fixw" align="center" :prop="k.prop" :label="k.label" :sortable="k.sort ? true : false">
          <slot :name="k.prop" :data="scope.row" slot-scope="scope">{{scope.row[k.prop]}}</slot>
        </el-table-column>
        <el-table-column v-else align="center" :prop="k.prop" :label="k.label" :sortable="k.sort ? true : false">
          <slot :name="k.prop" :data="scope.row" slot-scope="scope">{{scope.row[k.prop]}}</slot>
        </el-table-column>
      </template>
      <el-table-column align="center" :fixed="fixedType?'right':fixedType" label="操作" v-if="isShowOperation">
        <slot name="operation" :data="scope.row" slot-scope="scope"></slot>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    props: {
      headerBgColor: {
        type: String,
        default: 'white'
      },
      fixHeight:{   
        type: Boolean,
        default: false
      },
      tableH:{      
        type: Number,
        default: 0
      },
      isShowSelection: {
        type: Boolean,
        default: false
      },
      isShowSerialNumber: {
        type: Boolean,
        default: true
      },
      isShowOperation: {
        type: Boolean,
        default: true
      },
      isShowSummary: {
        type: Boolean,
        default: false
      },
      fixedType:{  
        type: Boolean,
        default: false
      },
      sort: {
        type: Array,
        default: () => []
      },
      props: Array,
      tableData: {
        type: Array,
        default: () => []
      },
    },
    data () {
      return {
      }
    },
    created () {},
    mounted(){},
    methods: {
      handleSelectionChange (val) {
        this.$emit('selectionChange', val)
      }
    }
  }
</script>

SimpleTable

Table Events

使用方式：

<template>
   <div class="h-table">
        <simpleTable
         :tableData="chartData2.rows"
         :props="callProps">
          <template #operation="{ data }">
             <a href="javascript:;">查看详情</a>
          </template>
        </simpleTable> 
  </div>
</template>
<script>
import simpleTable from "./../components/simpleTable";
export default {
  name: "home",
  components: {
      simpleTable
  },
  data() {
    return {
         callProps: [
        {
          prop: "date",
          label: "日期",
          fixw: "150"    // 自定义某列宽度
        }, 
        {
          prop: "callNum",
          label: "外呼数",
          sort: true    // 是否可以筛选
        },
        {
          prop: "callSuccess",
          label: "外呼成功数",
        },
        {
          prop: "connectNum",
          label: "接通率",
        },
        {
          prop: "connectDuring",
          label: "外呼平均通话时长",
        },
      ],
      chartData2: {
        rows: [
          { date: "2020-03-04", callNum: 1393, callSuccess: 1093 },
          { date: "2020-03-05", callNum: 3530, callSuccess: 3230 },
          { date: "2020-03-06", callNum: 2923, callSuccess: 2623 },
          { date: "2020-03-07", callNum: 1723, callSuccess: 1423 },
          { date: "2020-03-08", callNum: 3792, callSuccess: 3492 },
          { date: "2020-03-09", callNum: 4593, callSuccess: 4293 },
        ],
      },
    };
  }
};
</script>
<style lang="scss" scoped>
 .h-table{
     width: 90%;
     margin-top: 20px;
     margin-left: 20px;
  }
</style>

二、myTable

<template>
  <div ref="table" v-loading="loading" >
    <el-table v-if="!fixHeigth" :data="tableData" :header-cell-style="{background:headerBgColor}" ref="multipleTable" border style="width: 100%;" @selection-change="handleSelectionChange" @sort-change="handleSortChange">
      <el-table-column v-if="isShowSelection" type="selection" width="55" align="center" :selectable="isSelectable"></el-table-column>
      <el-table-column align="center" label="序号" min-width="70" v-if="isShowSerialNumber">
        <template slot-scope="scope">
          <span>{{scope.$index+(currentPage-1)*pageSize+1}}</span>
        </template>
      </el-table-column>
      <template v-for="k in props">
        <el-table-column v-if="k.fixw" :min-width="k.fixw" align="center" :prop="k.prop" :label="k.label" :sortable="k.sort ? true : false">
          <slot :name="k.prop" :data="scope.row" slot-scope="scope">{{scope.row[k.prop]}}</slot>
        </el-table-column>
        <el-table-column v-else align="center" :prop="k.prop" :label="k.label" :sortable="k.sort ? true : false">
          <slot :name="k.prop" :data="scope.row" slot-scope="scope">{{scope.row[k.prop]}}</slot>
        </el-table-column>
      </template>
      <el-table-column align="center" :fixed="fixedType?'right':fixedType" label="操作" v-if="isShowOperation">
        <slot name="operation" :data="scope.row" slot-scope="scope"></slot>
      </el-table-column>
    </el-table>

    <el-table v-else :height="tableH" :data="tableData" :header-cell-style="{background:headerBgColor}" ref="multipleTable" border style="width: 100%;" @selection-change="handleSelectionChange" @sort-change="handleSortChange">
      <el-table-column v-if="isShowSelection" type="selection" width="55" align="center" :selectable="isSelectable"></el-table-column>
      <el-table-column align="center" label="序号" min-width="70" v-if="isShowSerialNumber">
        <template slot-scope="scope">
          <span>{{scope.$index+(currentPage-1)*pageSize+1}}</span>
        </template>
      </el-table-column>
      <template v-for="k in props">
        <el-table-column v-if="k.fixw" :min-width="k.fixw" align="center" :prop="k.prop" :label="k.label" :sortable="k.sort ? true : false">
          <slot :name="k.prop" :data="scope.row" slot-scope="scope">{{scope.row[k.prop]}}</slot>
        </el-table-column>
        <el-table-column v-else align="center" :prop="k.prop" :label="k.label" :sortable="k.sort ? true : false">
          <slot :name="k.prop" :data="scope.row" slot-scope="scope">{{scope.row[k.prop]}}</slot>
        </el-table-column>
      </template>
      <el-table-column align="center" :fixed="fixedType?'right':fixedType" label="操作" v-if="isShowOperation">
        <slot name="operation" :data="scope.row" slot-scope="scope"></slot>
      </el-table-column>
    </el-table>

    <div class="bottom-row" v-if="isShowPagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :current-page.sync="currentPage"
        layout="prev, pager, next, jumper, total"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      headerBgColor: {
        type: String,
        default: 'white'
      },
      isShowSelection: {
        type: Boolean,
        default: false
      },
      immediate: {
        type: Boolean,
        default: true
      },
      fixHeigth:{   //固定高度
        type: Boolean,
        default: false
      },
      isShowSerialNumber: {
        type: Boolean,
        default: true
      },
      isShowOperation: {
        type: Boolean,
        default: true
      },
      isShowPagination: {
        type: Boolean,
        default: true
      },
      isSecondLayer: {
        type: Boolean,
        default: true
      },
      isPost: {
        type: Boolean,
        default: true
      },
      isCustomTime:{  // 起始时间划分为两个参数的情况
        type: Boolean,
        default: false
      },
      tableH:{        // 表格高度，横向内容超过可视区域时适配小屏幕电脑
        type: Number,
        default: 0
      },
      fixedType:{  // 是否固定右侧操作栏
        type: Boolean,
        default: false
      },
      isArray: {
        type: Boolean,
        default: true
      },
      callback: Function,
      sort: {
        type: Array,
        default: () => []
      },
      query: Object,
      props: Array,
      action: String,
      isSelectable: Function,
      dataList: String,
      selected: String
    },
    data () {
      return {
        loading: false,
        tableData: [],
        total: 0,
        pageSize: 10,
        currentPage: 1
      }
    },
    async created () {
      this.immediate && await this.search()
    },
    methods: {
      async search (i, isScroll) {
        this.currentPage = i > 0 ? i : this.currentPage
        let query = JSON.parse(JSON.stringify(this.query))
        for (let key in query) {
          if (Array.isArray(query[key])) {
            query[key] = query[key].toString()
          }
        }
        let req = {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          ...query
        }
        if(this.isCustomTime){
          let paytime=this.query.payTime || [];
           req.payTimeStart=paytime[0]
           req.payTimeEnd=paytime[1]
        }
        this.loading = true
        if (this.isPost) {
            this.$api.post(this.action, req, r => {
              this.loading = false
              this.handleOperation(r, isScroll)
            })
        } else {
          this.$api.get4(this.action, req, r => {
            this.loading = false
            this.handleOperation(r, isScroll)
          })
        }
      },
      handleOperation (r, isScroll) {
        if (r.flag) {
          this.callback && this.callback(r) // 如果要对返回值做额外操作
          if (this.isSecondLayer) {  // 有分页
            if(r.data.allNum){
               this.total = +r.data.allNum
            }else{
               this.total = +r.data.total
            }
            if (!this.dataList) {  // 如果接口返回的data数据为dataList，根据实际情况而定
              this.tableData = r.data.dataList
            } else {  // 其他参数名时取值
              this.tableData = r.data[this.dataList]
            }
          } else {  // 没有分页
            if (this.isArray) {  // 如果数据类型为数组
              this.tableData = r.data
            } else {   // 如果数据类型为非数组
              this.tableData = []
              this.tableData.push(r.data)
            }
          }
          this.selected && this.handleTest()
          isScroll && this.$refs.table.scrollIntoView({behavior: 'smooth', block: 'start'})
        }
      },
      handleCurrentChange (index) {
        this.search(index, true)
      },
      handleSortChange (val) {
        this.$emit('sortChange', val)
      },
      handleSelectionChange (val) {
        this.$emit('selectionChange', val)
      },
      handleSizeChange (val) {
        this.pageSize = val
        this.search(1, true)
      },
      handleTest () {
        const rows = this.selected.split(',')
        this.tableData.forEach((row, i) => {
          rows.forEach(_ => {
            if (row.id === parseInt(_)) {
              this.$nextTick(() => {
                this.$refs.test.toggleRowSelection(row, true)
              })
            }
          })
        })
      },
      clearSelected () {
        this.$refs.multipleTable.clearSelection()
      }
    }
  }
</script>
<style lang="scss" scoped>
</style>

myTable

使用方式：

• 1、数据结构为非数组，只显示一行的统计类表格

data：{
    redAmount: "632.00"
    people: 3
    gift: 11
}

<template>
  <div>
        <el-date-picker
        style="width:220px;"
        size="small"
        clearable
        value-format="yyyy-MM-dd"
        v-model="searchInfo.time"
        type="daterange"
        :picker-options="$utils.pickerOptions"
        range-separator="至"
        start-placeholder="时间选择"
        end-placeholder="时间选择">
      </el-date-picker>
      <el-button type="primary" size="small" @click="$refs.table.search(1)">查询</el-button>
      <mytable style="padding: 10px;" :isArray="false" :action="action" :query="searchInfo" :props="props" ref="table" :isShowSerialNumber="false" :isShowPagination="false" :isSecondLayer="false" :isShowOperation="false"></mytable>
  </div>
</template>
<script>
export default {
  data() {
    return {
        action: this.$api.baseUrl + 'xxx/xxx/xxxx',
        searchInfo: {
           time: ''
        },
        props: [
        {
          prop: 'uvNum',
          label: '落地页uv'
        },
        {
          prop: 'people',
          label: '红包领取人数'
        },
        {
          prop: 'gift',
          label: '坚果礼包领取人数'
        }
      ],
    };
  },
};
</script>

• 2、常用统计表

<mytable dataList="records" :fixedType="true" style="padding: 10px;" :action="action1" :query="searchInfo" :props="props1" ref="table1">
            <template #status="{data}">
               <p class="status-reject" v-if="data.status === 0">审核不通过</p>
               <p class="status-pass" v-if="data.status === 1">审核通过</p>
               <p class="status-wait" v-else>未审核</p>
            </template>
            <template #operation="{data}">
              <p class="detail" v-if="!data.status"  @click="statusAction(data,1)">审核通过</p>
              <p></p>
            </template>
</mytable>

<script>
export default {
  data() {
    return {
        action1: this.$api.baseUrl + 'xxx/xxx/xxxx',
        searchInfo: {
           time: ''
        },
        props1: [
        {
          prop: 'uvNum',
          label: '落地页uv'
        },
        {
          prop: 'people',
          label: '红包领取人数'
        },
        {
          prop: 'gift',
          label: '坚果礼包领取人数'
        },
        {
          prop: 'status' ,
          label: '审核状态'
        }
      ],
    };
  },
};
</script>