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

简介: 现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开。虽然element ui的table组件很好。

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

相关文章
|
1月前
「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件
本篇将带你实现一个自定义天气预报组件。用户可以通过选择不同城市来获取相应的天气信息,页面会显示当前城市的天气图标、温度及天气描述。这一功能适合用于动态展示天气信息的小型应用。
149 38
|
28天前
|
人工智能 开发框架 JavaScript
LowCodeEngine:阿里开源的企业级低代码开发平台,提供预制的 UI 组件和模板,覆盖完整的研发周期
LowCodeEngine 是阿里巴巴开源的低代码开发框架,旨在通过拖拽、配置等简单操作,帮助开发者快速构建复杂的系统页面,提升开发效率和质量。
97 4
LowCodeEngine:阿里开源的企业级低代码开发平台,提供预制的 UI 组件和模板,覆盖完整的研发周期
|
2月前
|
前端开发 搜索推荐 开发者
「Mac畅玩鸿蒙与硬件20」鸿蒙UI组件篇10 - Canvas组件自定义绘图
Canvas 组件在鸿蒙应用中用于绘制自定义图形,提供丰富的绘制功能和灵活的定制能力。通过 Canvas,可以创建矩形、圆形、路径、文本等基础图形,为鸿蒙应用增添个性化的视觉效果。本篇将介绍 Canvas 组件的基础操作,涵盖绘制矩形、圆形、路径和文本的实例。
113 12
「Mac畅玩鸿蒙与硬件20」鸿蒙UI组件篇10 - Canvas组件自定义绘图
|
2月前
|
搜索推荐 前端开发 开发者
「Mac畅玩鸿蒙与硬件19」鸿蒙UI组件篇9 - 自定义动画实现
自定义动画让开发者可以设计更加个性化和复杂的动画效果,适合表现独特的界面元素。鸿蒙提供了丰富的工具,支持通过自定义路径和时间控制来创建复杂的动画运动。本篇将带你学习如何通过自定义动画实现更多样化的效果。
101 11
|
2月前
|
UED 开发者
「Mac畅玩鸿蒙与硬件18」鸿蒙UI组件篇8 - 高级动画效果与缓动控制
高级动画可以显著提升用户体验,为应用界面带来更流畅的视觉效果。本篇将深入介绍鸿蒙框架的高级动画,包括弹性动画、透明度渐变和旋转缩放组合动画等示例。
108 12
「Mac畅玩鸿蒙与硬件18」鸿蒙UI组件篇8 - 高级动画效果与缓动控制
|
2月前
|
UED
「Mac畅玩鸿蒙与硬件31」UI互动应用篇8 - 自定义评分星级组件
本篇将带你实现一个自定义评分星级组件,用户可以通过点击星星进行评分,并实时显示评分结果。为了让界面更具吸引力,我们还将添加一只小猫图片作为评分的背景装饰。
94 6
|
2月前
|
前端开发 开发者
「Mac畅玩鸿蒙与硬件21」鸿蒙UI组件篇11 - Canvas 组件的静态进阶应用
在鸿蒙应用开发中,Canvas 组件不仅用于基础绘图,还提供了处理复杂路径和渐变效果的多种手段,帮助开发者实现精美的静态图形。本篇将介绍如何在 Canvas 中绘制复杂路径、创建渐变填充效果。
76 7
「Mac畅玩鸿蒙与硬件21」鸿蒙UI组件篇11 - Canvas 组件的静态进阶应用
|
2月前
|
前端开发 开发者
「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas 组件的动态进阶应用
在鸿蒙应用中,Canvas 组件可以实现丰富的动态效果,适合用于动画和实时更新的场景。本篇将介绍如何在 Canvas 中实现动画循环、动态进度条、旋转和缩放动画,以及性能优化策略。
78 6
|
2月前
|
前端开发 开发者
「Mac畅玩鸿蒙与硬件23」鸿蒙UI组件篇13 - 自定义组件的创建与使用
自定义组件可以帮助开发者实现复用性强、逻辑清晰的界面模块。通过自定义组件,鸿蒙应用能够提高代码的可维护性,并简化复杂布局的构建。本篇将介绍如何创建自定义组件,如何向组件传递数据,以及如何在不同页面间复用这些组件。
71 5
|
1月前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。

热门文章

最新文章