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

现在做后台系统用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()

66 声望
1 粉丝
0 条评论
推荐阅读
使用vue3封装Switch开关组件
工作中switch开关组件组件中都有,但是这个组件自己会封装吗?这篇文章教大家运用简单的html元素实现就能实现一个Vue3版本的switch组件。

xdlumia阅读 1.7k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木140阅读 11.8k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7k评论 6

【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6k评论 9

66 声望
1 粉丝
宣传栏