文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-634245.html

//代碼可直接復(fù)制看效果，
<template>
  <div>
    <el-button @click="submitData()">提交列表選中數(shù)據(jù)</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, // 得到的列表總數(shù)
      page: 1,
      listLoading: false,
      checkList: [],
      checkIds: [],
    };
  },
  mounted() {
    this.getData(this.lists); // 模擬接口查詢列表數(shù)據(jù)
  },
  methods: {
    // 分頁(yè)
    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" },
        ];
      }
    },

    // 模擬接口返回的展示列表數(shù)據(jù)
    getData(lists) {
      console.log(lists);
      // 每一次執(zhí)行數(shù)據(jù)請(qǐng)求的方法時(shí)，在請(qǐng)求成功的方法里執(zhí)行回顯
      if (this.checkList !== undefined) {
        this.checkList.forEach((key) => {
          this.lists.forEach((row) => {
            if (row.id === key.id) {
              // 新增的時(shí)候
              this.$refs.table.toggleRowSelection(row, true);
            }
          });
        });
      }
    },
    // 獲取取消勾選的其余已勾選數(shù)據(jù)
    handleSelectRow(selecteds, rows) {
      this.checkList = selecteds;
    },

    // 獲取單頁(yè)全選的數(shù)據(jù)
    handleSelectAll(rows) {
      this.checkList = rows;
    },

    // 單頁(yè)選中的數(shù)據(jù)的id數(shù)組提交時(shí)返回給后端保存
    submitData() {
      // 獲取所有選中的id的集合,用于提交時(shí)調(diào)用接口傳參數(shù)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>

到了這里，關(guān)于elementui實(shí)現(xiàn)當(dāng)前頁(yè)全選+所有全選+翻頁(yè)保持選中狀的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！