Element table 分頁多選-取消保存

首先在el-table綁定方法myselect:

            <el-table
              v-loading="tableLoading"
              ref="multipleTable"
              :data="tableData"
              header-cell-class-name="custom-table"
              @select="mySelect"
              @selection-change="handleSelectionChange">
              <el-table-column
                type="selection"
                width="30"
                align="center"
                fixed
              />
              <el-table-column
                type="index"
                prop="id"
                label="序號"
                width="50"
                align="center"/>
              <el-table-column
                prop="name"
                label="別名"
                width="150"
                show-overflow-tooltip
                align="center"/>
           </el-table>

在methods裏面定義方法：

    mySelect(selection, row) {
      // selection 當前頁面所有選中的項
      // row 當前點擊操作的項
      if (selection.indexOf(row) >= 0) { // 新增（勾選上）
        selection.map(el => {
          if (this.allSelects.indexOf(el.id) === -1) {
          // 新添加（allSelects是後端返回已經被選擇的id數組）
            this.allSelects.push(el.id)
          }
        })
        console.log('所有選中的', this.allSelects)
      } else { // 取消勾選
        this.allSelects.map((el2, index) => {
          if (el2 === row.id) {
            this.allSelects.splice(index, 1)
          }
        })
        console.log('刪除後的數組', this.allSelects)
      }
    },

然後在獲取分頁數據時，勾選已經選中的項（this.tableData是分頁數據列表）

    checkedSelected() {
      this.$nextTick(() => {
        this.tableData.forEach(row => {
          if (this.allSelects.indexOf(row.id) >= 0) {
            this.$refs.multipleTable.toggleRowSelection(row, true)
          }
        })
      })
    },

最後保存時把this.allSelects的值傳給後端就OK了,有不合理的地方歡迎大家指出