欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-07 17:06:36
...

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

 <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