Vue + ElementUI 之el-table的二次封装带翻页功能

原创已于 2022-07-18 10:19:57 修改 · 916 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端 #javascript

于 2022-07-18 10:12:55 首次发布

本文分享了一篇关于如何创建一个自定义Vue组件，用于实现高效的数据表格展示和分页功能。组件包含表格样式设置、参数传递、数据监听以及响应式加载方法。通过监听和处理数据变化，实现动态加载和分页效果，同时提供了错误处理和空状态显示。文章鼓励读者分享更好的实现方式，共同提升开发效率。

每期会定期更新，分享新的干货，欢迎大家留言评论

前言

随着table表格大家都在使用，将提供给方便的组件，减少代码冗余，提高质量，加快开发进度，
大家有更好的方法，欢迎大家留言，将会认真学习。

效果图

在这里插入图片描述

一、组件table

 <div :class="tableClassName">
    <el-table
      ref="table"
      :data="tableData"
      :stripe="stripe"
      :height="tableHeight"
      :border="showBorder"
      :tooltip-effect="light"
      v-bind="$attrs"
      v-on="$listeners"
      v-loading='loading'>
      <slot></slot>
      <template slot="empty">
        <span v-if="showEmpty"></span>
        <sh-empty v-else-if="!$slots.empty && empty"></sh-empty>
        <slot name="empty" v-else></slot>
      </template>
    </el-table>
    <el-pagination
      v-if="showPage"
      class="sh-page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="pageSizesArr"
      :layout="layout"
      :total="tableCount"
      :page-size="tableLimit"
      :current-page="tablePage">
    </el-pagination>
  </div>
</template>

二、组件传参

props: {
    api: String,
    layout: String,
    pageSizes: Array,
    param: { // 检索内容
      type: Object,
      default: () => {
        return {}
      }
    },
    data: Array,
    limit: Number,
    page: Number,
    count: Number,
    border: String,
    showPage: { // 是否显示分页
      type: Boolean,
      default: true
    },
    stripe: {
      type: Boolean,
      default: true
    },
    defaultLoad: {
      type: Boolean,
      default: true
    },
    height: String,
    empty: {
      type: Boolean,
      default: true
    },
    className: String
  },

三.监听数据

data: {
      handler(val) {
        if (val) {
          this.tableData = val
          this.showEmpty = false
        }
      },
      immediate: true
    },
    page: {
      handler(val) {
        if (val) {
          this.tablePage = val
        }
      },
      immediate: true
    },
    limit: {
      handler(val) {
        if (val) {
          this.tableLimit = val
        }
      },
      immediate: true
    },
    count: {
      handler(val) {
        this.tableCount = val
      },
      immediate: true
    },
    param: {
      handler(val) {
        this.tablePage = 1
      }
    }

该处使用的url网络请求的数据。

四、Js

 // 每页多少条
    handleSizeChange(val) {
      this.tableLimit = val
      this.$emit('update:limit', val)
      this.loadList()
    },
    // 当前页
    handleCurrentChange(val) {
      this.tablePage = val
      this.$emit('update:page', val)
      this.loadList(true)
    },
    // 加载table
    loadList() {
      if (this.api) {
        this.loading = true
        this.$post(
          this.api,
          {
            ...this.param,
            page: this.tablePage,
            limit: this.tableLimit
          },
          data => {
            this.tableData = data.data
            this.$emit('update:data', this.tableData)
            this.tableCount = data.count || 0
            this.loading = false
            this.showEmpty = false
            // 判断如果总页数少于当前页的时候就重置当前页为1
            if (this.tableCount / this.tableLimit + 1 < this.tablePage) {
              this.tablePage = 1
              this.loadList()
            }
          },
          error => {
            this.loading = false
            this.showEmpty = false
            this.$message.error(error.msg)
          }
        )
      } else {
        this.$emit('loadList')
      }
    },
    toggleRowSelection(row, selected) {
      this.$refs.table.toggleRowSelection(row, selected)
    },
    clearSelection() {
      this.$refs.table.clearSelection()
    }

总结

完整代码评论留言