elementui实现当前页全选+所有全选+翻页保持选中状-Toy模板网

这篇具有很好参考价值的文章主要介绍了elementui实现当前页全选+所有全选+翻页保持选中状。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

elementui实现当前页全选+所有全选+翻页保持选中状,javascript,开发语言,ecmascript 文章来源地址https://www.toymoban.com/news/detail-634245.html

//代码可直接复制看效果，
<template>
  <div>
    <el-button @click="submitData()">提交列表选中数据</el-button>
    <!--列表-->
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="lists"
      highlight-current-row
      style="width: 100%"
      :row-key="
        (row) => {
          return row.id;
        }
      "
      @select="handleSelectRow"
      @select-all="handleSelectAll"
    >
      <el-table-column type="selection" :reserve-selection="true" />
      <el-table-column prop="id" label="id" />
      <el-table-column prop="time" label="time" />
    </el-table>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        :current-page="this.page"
        layout="total , prev, pager, next"
        :page-size="10"
        :total="total"
        style="float: right"
        @current-change="handleCurrentChange"
      />
    </el-col>
    <div class="clearfix" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      lists: [
        { id: "1", time: "2019-09-09 12:12:12" },
        { id: "2", time: "2019-09-09 12:12:12" },
        { id: "3", time: "2019-09-09 12:12:12" },
        { id: "4", time: "2019-09-09 12:12:12" },
        { id: "5", time: "2019-09-09 12:12:12" },
        { id: "6", time: "2019-09-09 12:12:12" },
        { id: "7", time: "2019-09-09 12:12:12" },
        { id: "8", time: "2019-09-09 12:12:12" },
        { id: "9", time: "2019-09-09 12:12:12" },
        { id: "10", time: "2019-09-09 12:12:12" },
      ],

      total: 13, // 得到的列表总数
      page: 1,
      listLoading: false,
      checkList: [],
      checkIds: [],
    };
  },
  mounted() {
    this.getData(this.lists); // 模拟接口查询列表数据
  },
  methods: {
    // 分页
    handleCurrentChange(val) {
      this.page = val;
      if (val === 1) {
        this.lists = [
          { id: "1", time: "2019-09-09 12:12:12" },
          { id: "2", time: "2019-09-09 12:12:12" },
          { id: "3", time: "2019-09-09 12:12:12" },
          { id: "4", time: "2019-09-09 12:12:12" },
          { id: "5", time: "2019-09-09 12:12:12" },
          { id: "6", time: "2019-09-09 12:12:12" },
          { id: "7", time: "2019-09-09 12:12:12" },
          { id: "8", time: "2019-09-09 12:12:12" },
          { id: "9", time: "2019-09-09 12:12:12" },
          { id: "10", time: "2019-09-09 12:12:12" },
        ];
      } else {
        this.lists = [
          { id: "11", time: "2019-09-09 12:12:12" },
          { id: "12", time: "2019-09-09 12:12:12" },
          { id: "13", time: "2019-09-09 12:12:12" },
        ];
      }
    },

    // 模拟接口返回的展示列表数据
    getData(lists) {
      console.log(lists);
      // 每一次执行数据请求的方法时，在请求成功的方法里执行回显
      if (this.checkList !== undefined) {
        this.checkList.forEach((key) => {
          this.lists.forEach((row) => {
            if (row.id === key.id) {
              // 新增的时候
              this.$refs.table.toggleRowSelection(row, true);
            }
          });
        });
      }
    },
    // 获取取消勾选的其余已勾选数据
    handleSelectRow(selecteds, rows) {
      this.checkList = selecteds;
    },

    // 获取单页全选的数据
    handleSelectAll(rows) {
      this.checkList = rows;
    },

    // 单页选中的数据的id数组提交时返回给后端保存
    submitData() {
      // 获取所有选中的id的集合,用于提交时调用接口传参数this.checkIds
      for (var i = 0; i < this.checkList.length; i++) {
        if (this.checkList[i] !== undefined && this.checkList.length > 0) {
          this.checkIds = this.checkList.map((item) => item.id);
        }
      }

      console.log(this.checkIds); // ['1', '2', '3', '4', '5', '6', '11', __ob__: Observer]
    },
  },
};
</script>
<style></style>