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了,有不合理的地方欢迎大家指出