element table多选只能选中当前页数据_element-ui里的el-table 前端分页

最新推荐文章于 2022-11-08 17:41:56 发布

Hasaki酱

最新推荐文章于 2022-11-08 17:41:56 发布

阅读量484

点赞数

文章标签： element table多选只能选中当前页数据

本文链接：https://blog.csdn.net/weixin_28918553/article/details/113631074

版权

本人是前端小白一枚此文章用以记录自己使用vue+element-ui实现项目时候实现的分页功能(和后续文章实现的功能不分先后,用到什么记录什么)
一次请求将全部要展示的数据获取到，分页在前端对数据进行处理进行分页展示

<el-tab-pane label="信息推送" name="second">
        <el-table
          :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          border
          style="width: 100%"
        >
          <el-table-column fixed prop="xmmc" label="项目名称" width="200" align="center"></el-table-column>
          <el-table-column prop="zdmj" label="征地面积" width="200" align="center"></el-table-column>
          <el-table-column prop="sxmc" label="市县名称" width="200" align="center"></el-table-column>
          <el-table-column prop="pzwh" label="批准文号" width="200" align="center"></el-table-column>
          <el-table-column prop="pzjg" label="批准机关" width="200" align="center"></el-table-column>
          <el-table-column prop="pzmj" label="批准面积" width="200" align="center"></el-table-column>
          <el-table-column prop="sqdw" label="申请单位" width="200" align="center"></el-table-column>
          <el-table-column prop="pzsj" label="批准时间" width="200" align="center"></el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope" align="center">
              <el-button @click="handleClick(scope.row)" type="text" size="mini">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
            <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="list.length"
          style="float:right;margin-top:15px;"
        ></el-pagination>
   </el-tab-pane>
data() {
    return {
     list: [],//保存请求到的数据
      pageSize: 10, //每页多少条
      currentPage: 1, // 当前页
    }
},
methods: {
    // 每页多少条
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
// 项目信息
    acquire() {
      let _this = this;
      let userid = window.localStorage.getItem("userid");
      this.$axios
        .post(
          "http://59.202.52.8/api/SelectData/SelectZdxmList",
          { userid },
          {
            headers: {
              "Content-Type": "application/json;charset=utf-8",
              "Access-Control-Allow-Origin": "*",
              Authorization: window.localStorage.getItem("token")
            }
          }
        )
        .then(res => {
          // 把成功请求到的数据保存到list中
          _this.list = res.data.list;
        })
        .catch(err => {
          console.log(err);
        });
    },