封装一个优雅的element ui表格组件

女爷i 2022-04-08 11:21 559阅读 0赞

现在做后台系统用vue + elementUI 的越来越多，那element ui的 el-table 组件肯定也离不开。虽然element ui的table组件很好。但是表格和分页是分离的。每次写表格的时候都要写分页。这个就比较麻烦了。那我们可不可以把表格和分页封装在一起呢？照这个思路那我们重新封装一个带分页的表格。

**思路：**

1.  表格组件要包含分页，不用每次都重新写分页
2.  尽量保证el-table原生方法
3.  方便易用

照这个思路我们开始写代码  
先把表格和分页写在一起

<template>
        <div>
            
            <el-table
            highlight-current-row  //点击当前行高亮
            :data="tableDate"      //表格数据
            border                 //添加斑马线
            :height="tableHeight"  //表格高度
            v-loading="loading"    //loading动画
            :size="size"           //表格大小
            @sort-change = "sortChange"  //排序
            @selection-change="selectionChange" //多选
            @current-change="currentChange" 
            @row-click = "rowClick"    //单行点击
            style="width: 100%">
                <slot></slot>
            </el-table>
            <el-pagination
            v-if="paging"
            @size-change="limitChange"
            @current-change="pageChange"
            :current-page.sync="params.page"
            :page-size="params.limit"
            :page-sizes="[10, 15, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableCount">
            </el-pagination>
        </div>
    </template>
    <script>
    export default {
      props: {
        //请求接口
        api: {
          required: true
        },
        //参数  默认返回分页和条数
        params: {
          type: [Object,String,Number],
          default: function() {
            return { page: 1, limit: 15 };
          }
        },
        // 尺寸
        size: {
          default: 'small'
        },
        // 分页
        paging: {
          default: true
        }
      },
      data() {
        return {
          tableCount: 0, //总条数
          tableDate: [], //表格数据
          loading: false, //loading动画
        };
      },
      created() {
        this.init(this.params);
      },
      computed: {
        // 实时更新server
        server:function(){
          return this.api.split('.')[0]
        },
        // 实时更新url
        url:function(){
          return this.api.split('.')[1]
        },
        tableHeight:function(){
          return this.paging?'calc(100% - 32px)':'100%'
        }
      },
      methods: {
        init(params) {
          this.loading = true;
          //如果采用微服务的方式需要传微服务和url
          this.$api[this.server][this.url](params)
            .then(res => {
              this.tableDate = res.data || [];
              // 如果有分页
              if(this.paging){
                this.tableCount = res.count || 0;
                this.params.page = res.curr || 0;
              }
            })
            .finally(() => {
              //关闭loading
              this.loading = false; 
            });
        },
        // 重新请求 //如果需要重新请求使用$refs 调用这个方法
        reload() {
          // 如果有分页
          if(this.paging){
            this.params.page = 1;
          }
          // api动态加载完 开始重新请求数据
          this.$nextTick(()=>{
            this.init(this.params);
          })
        },
        以下是对el-table原来的方法再次封装emit出去
        // 多选
        selectionChange(val){
          this.$emit('selection-change',val)
        },
        // 单选
        currentChange(currentRow, oldCurrentRow){
          this.$emit('current-change',currentRow, oldCurrentRow)
        },
        rowClick(row, event, column){
          this.$emit('row-click',row, event, column)
        },
        // 排序
        sortChange(column, prop, order){
          this.$emit('sort-change',column, prop, order)
        },
        // 表格翻页
        pageChange(page) {
          this.params.page = page;
          this.init(this.params);
        },
        limitChange(limit){
          this.params.limit = limit;
          this.init(this.params);
        },
      }
    };
    </script>

别人使用起来非常简单 ,也不用再写任何请求方法  
可以全局引入

<d-table 
        api="bizSystemService.getEmployeeList" //微服务名称+接口名称
        :params="queryForm"    //接口请求的参数. 默认是limit和page
        ref="table"
        size="small">
        //下面的使用方式和el-table一样
        <el-table-column
                align="center"
                label="序号"
                width="50">
                <template slot-scope="scope">
                {
       {scope.$index+1}}
                </template>
            </el-table-column>
            <el-table-column
                prop="roleTypeName"
                align="center"
                label="角色类型"
                width="120">
                <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
            </template>
            </d-table-column>
        </el-table>

如果想刷新数据 使用reload方法即可. this.$refs.table.reload()

原文地址：[https://segmentfault.com/a/1190000017346342][https_segmentfault.com_a_1190000017346342]

[https_segmentfault.com_a_1190000017346342]: https://segmentfault.com/a/1190000017346342