element的el-table 解决表格多页选择数据时，数据被清空

最新推荐文章于 2024-05-27 09:30:11 发布

大大。

最新推荐文章于 2024-05-27 09:30:11 发布

阅读量922

点赞数 5

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_43923808/article/details/138344851

版权

本文介绍了在Vue项目中使用ElementUI表格时，如何通过getRowKeys方法设置行键和reserve-selection属性来确保在切换页码时，勾选的数据不会被清空，重点关注了productId作为唯一变量的应用。

摘要由CSDN通过智能技术生成

问题：切换页码时，勾选的数据会被清空

重点看我圈出来的，直接复制，注意，我这里 return row.productId;一般大家的是 return row.id,根据接口定的唯一变量

 :row-key="getRowKeys"

 :reserve-selection="true"

  getRowKeys(row) {
        return row.productId;
      },

官方解说

参考我项目里的下方代码

 <el-table v-loading="listLoading"
              :data="list"
                ref="multipleTable"
              border
              fit
              @selection-change="handleSelectionChange"
            :row-key="getRowKeys"
              highlight-current-row>
      <el-table-column
      :reserve-selection="true"
        type="selection"
        width="40">
      </el-table-column>
      <el-table-column align="center"
                       width="180px"
                       label="销售单号">
        <template slot-scope="scope">
          <span>{{ scope.row.orderId }}</span>
        </template>
      </el-table-column>
    </el-table>


  data () {
    return {
  getRowKeys(row) {
        return row.productId;
      },
rowSelection:'',
    }


  methods: {
  handleSelectionChange(val) {
      this.rowSelection = val;
 
    },
}