vue el-table 分页表格的封装（简单版本）

最新推荐文章于 2025-04-24 17:20:34 发布

mqbug

最新推荐文章于 2025-04-24 17:20:34 发布

阅读量2.4k

点赞数

分类专栏：网页前端文章标签： vue html5 javascript

本文链接：https://blog.csdn.net/mqbug/article/details/107720512

版权

网页前端专栏收录该内容

4 篇文章

订阅专栏

vue el-table 分页表格的封装（简单版本）

前言

分页表格在我们的后台管理系统中经常用到，element框架的表格几乎可以说满足大部分的功能需求，实现起来也比较方便，扩展性也比较强。但是在实际开发中，有需要到分页表格的页面都还是得复制粘贴改改，还是比较不方便开发

设计思路

设计的思路是参考layui表格的，layui分页表格使用起来很方便，分页的逻辑不用自己去写，后台返回的数据只要根据他的要求来就可以，不符合要求也能自己修改 layui表格地址
我们只需要根据自己业务需要写对应的js就可以了

具体代码

封装的组件

element表格地址

封装思路

接收一个tableData对象的数据
reqUrl： 表示请求数据的地址
operaData： 是行内操作按钮的数据
columnData： 是表格需要显示的哪些字段数据

  tableData: {
      reqUrl: "https://easy-mock.com/mock/5f2403effa76424e9506a6b8/example/getData",
      operaData: {
          isShow: true,
          data: [
            { label: "删除", type: "danger" },
            { label: "增加", type: "primary" },
            { label: "其他", type: "info" }
          ]
        },
        columnData: [
          { prop: "name", label: "名字", width: 200, align: "center" },
          { prop: "time", label: "时间", align: "center" }
        ]
      }

<template>
  <el-card>
    <el-table :data="tableList" style="width: 100%">
      <el-table-column type="index" align="center" label="序号" width="50">
        <template slot-scope="scope">
          <span>{{scope.$index+1+(currentPage-1)*limit}}</span>
        </template>
      </el-table-column>
      <el-table-column
                       v-for="it in tableData.columnData"
                       :key="it.name"
                       :prop="it.prop"
                       :align="it.align"
                       :label="it.label"
                       :width="it.width">
       </el-table-column>
      <!-- 操作 -->
      <el-table-column v-if="tableData.operaData.isShow" fixed="right" label="操作" align="center" :width="tableData.operaData.data.length*80">
        <template slot-scope="scope">
          <el-button
                     v-for="(it,index) in tableData.operaData.data"
                     :key="it.label"
                     :type="it.type"
                     @click="btnClick(scope.row,index)"
                     plain
                     size="small">{{it.label}}
           </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
                   style="margin: 40px 0 10px 30px;"
                   background
                   @size-change="pageSizeChange"
                   @current-change="currentChange"
                   :current-page="currentPage"
                   :page-sizes="pageSize"
                   :page-size="limit"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
     </el-pagination>
  </el-card>
</template>

<script>
import axios from "axios";
export default {
  name: "tables",
  props: {
    tableData: { type: Object, default: () => [] }
  },
  data() {
    return {
      tableList: [],      //表格渲染数据
      currentPage: 1,     //当前页
      pageSize: [5, 10, 20, 50, 100], //页数选择
      total: 0,         //总条数
      limit: 5            //分页数
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    // 获取远程数据
    getTableData() {
      var data = {
        page: this.currentPage,
        limit: this.limit
      };
      axios.post(this.tableData.reqUrl, data).then(res => {
        console.log("请求", res.data);
        if (res.data.code == 1) {
          this.tableList = res.data.data.list;
          this.total = res.data.data.count;
        }

      });
    },
    // 条数选择
    pageSizeChange(val) {
      this.limit = val;
      this.getTableData();
    },
    // 当前页选择
    currentChange(val) {
      this.currentPage = val;
      this.getTableData();
    },
    // 操作按钮
    btnClick(e, idx) {
      this.$emit("click_" + (idx + 1), e)
    }
  }
};
</script>

<style>
</style>

使用分页组件

import 引入组件
components 声明使用组件
在页面引入组件
配置对应的数据

<template>
  <div>
    <tables :tableData="tableData" @click_1="test1" @click_2="test2" @click_3="test3"></tables>
  </div>
</template>

<script>
import tables from "../components/tables";
export default {
  data() {
    return {
      tableData: {
        reqUrl: "https://easy-mock.com/mock/5f2403effa76424e9506a6b8/example/getData",
        operaData: {
          isShow: true,
          data: [
            { label: "删除", type: "danger" },
            { label: "增加", type: "primary" },
            { label: "其他", type: "info" }
          ]
        },
        columnData: [
          { prop: "name", label: "名字", width: 200, align: "center" },
          { prop: "time", label: "时间", align: "center" }
        ]
      }
    };
  },
  components: {
    tables //注册table组件
  },
  methods: {
    test1(e) {
      this.$message("删除")
      console.log("删除", e.name);
    },
    test2(e) {
      this.$message("增加");
      console.log("增加", e.name);
    },
    test3(e) {
      this.$message("其他");
      console.log("其他", e.name);
    }
  }
};
</script>