vue+element踩坑记-Table切换页码时被选中状态不变

何处锦绣不灰堆

发布于 2020-05-29 09:32:04

1.2K0

发布于 2020-05-29 09:32:04

需求分析

在做项目的时候遇到了一个这样需求，用户在选择没有结单的Table的时候，可以选择多个没有支付的订单进行加入一个统一结账的“购物车”中，那么可以选择任意页的，这个时候就遇到一个我们经常会遇到的问题了，那就是当我们切换页码的时候，之前用户选择的一些选项的选中状态就会消失了，这个是我们接受不了的，因为这样的话，其实业务是错的，所以今天就简单的说一下怎么解决这样的问题，同时写一下怎么根据列中的某一项进行判断该行的复选框是不是可以被选中的状态。

PS：这里不是写原生js解决这类的问题，使用的是官方的组件提供的方法，下面介绍的也是官网共提供的解决方案！

效果预览

官方文档

https://element.eleme.cn/#/zh-CN/component/table#duo-xuan

selectable：仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选，function类型

reserve-selection：仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key） boolean类型

row-key：行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。 funtion类型

我们主要是用这个三个参数解决这个问题。

源码

<el-table
            ref="multipleTable"
            @selection-change="handleSelectionChange"
            :data="tableData_no_statement"
            stripe
            size="mini"
            :row-key="getRowKeys"
            :cell-style="{textAlign:'center'}"
            :header-cell-style="{background:'#303A41',color:'#fff',fontSize:'x-small',textAlign:'center'}"
            style="width: 100%;margin-top: 10px">
            <el-table-column
              type="selection"
              :selectable="selectable"
              :reserve-selection="true"
              width="55">
            </el-table-column>
</el-table>

  /**
    * @getRowKeys 设置回显的函数
    * @parmas row 当前行的数据，需要一个唯一的标识来标记是哪一个被选中了
    */
     getRowKeys(row) {
          return row.id;
     },
     /**
       * @selectable 设置不可点击的状态
       * @param row.pay_status === 0 是未支付的状态，这样的状态是可以选择的。未支付的是可以被选中的，已支付的是不可以被选中的
       */
      selectable(row,index){
        if(row.pay_status === 0){
           return true;
        }else{
           return false;
        }
      },

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019-05-16 ，如有侵权请联系 cloudcommunity@tencent.com 删除

component