vue+elementui 实现带分页多选表格记忆之前的选项

1.官方提供的reserve-selection属性,为true时可保留之前选中的数据(需要指定row-key)vue+elementui 实现带分页多选表格记忆之前的选项_第1张图片

 <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    :row-key="getRowKeys">   //指定row-key
    <el-table-column
      type="selection"
      width="55"
      :reserve-selection="true">   //加上该属性,值为true
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{
     {
      scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
  </el-table>
  
   methods: {
     
      handleSelectionChange(val) {
     
        this.multipleSelection = val;
      },
      getRowKeys(row) {
     
        return row.id;   //指定row-key的一个标识
      },
    }

你可能感兴趣的:(vue)