最近碰到個需求，el-table列表渲染數(shù)據(jù)，要求有多選框并且附帶默認選中，翻頁后保留選中狀態(tài)
寫默認選中時百度一下還很簡單，但是碰到個bug，第一次翻頁可以保留，第二次翻頁回來之后選中的就沒了。
經(jīng)過研究解決，記錄一下，直接上代碼了
默認選中只需要給table增加

 :row-key="getRowKeys"
:reserve-selection="true"

然后列表獲取數(shù)據(jù)時用這個方法，我這里是默認選中row.number == 9的數(shù)據(jù)，

  this.$nextTick(() => {
        let table = this.tableData; 
        table.forEach(row => {
          if (row.number == 9)
            this.$refs.table.toggleRowSelection(row, true);
        });
      });

完整代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-620079.html

<template>
  <div>
    <div style="width: 80%; margin: 20px auto">
      <div v-for="item in multipleSelection" :key="item.id">
        {{ item.name }}
      </div>
      <el-table
        :row-key="getRowKeys"
        border
        ref="table"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          :reserve-selection="true"
          type="selection"
          width="55"
        />
        <el-table-column property="id" label="id" width="55" />
        <el-table-column property="name" label="name" />
        <el-table-column property="number" label="number" />
        <el-table-column property="desc" label="desc" />
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(totals)"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      page: 1,
      pageSize: 10,
      totals: ''
    }
  },
  methods: {
    SelectionChange() {
      this.$nextTick(() => {
      //這里把數(shù)據(jù)重新賦值一下，不然就會出現(xiàn)bug，從第一頁翻到第二頁可以保留，在回到第一頁選中的就沒了
        let table = this.tableData; 
        table.forEach(row => {
          if (row.number == 9)
            this.$refs.table.toggleRowSelection(row, true);
        });
      });
    },

    handleSelectionChange(e) {
      this.multipleSelection = e
    },
    // 獲取列表數(shù)據(jù)
    getDemoList() {
      let param = {
        page: this.page,
        pageSize: this.pageSize
      }
      this.$axios.post('/api/getList', param).then((res) => {
        this.tableData = res.data.data.list
        this.totals = res.data.data.total
        this.SelectionChange()
      })
    },
    getRowKeys(row) {
      return row.id
    },
    handleCurrentChange(page) {
      this.page = page
      this.getDemoList()
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getDemoList()
    }
  },
  mounted() {
    this.getDemoList()
    
  }
}
</script>

到了這里，關(guān)于el-table多選框設(shè)置默認選中，翻頁保留選中狀態(tài)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！