vue + element-ui table组件多页选择数据回显,分页记录保存选中的数据

1.安装 element-ui @2.6.1版本(高版本不支持)

npm install element-ui@2.6.1

2.在table表单中添加 :row-key="getRowKeys" 和 :reserve-selection="true"

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

<el-table :data.sync="tableData" border height="520" size="small" class="table"
                  ref="multipleTable"
                  style="width:100%"
                  :row-key="getRowKeys"
                  @sort-change="getSortChange"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection" :reserve-selection="true"  width="55"></el-table-column>
          <el-table-column prop="code" label="编号" v-if="show_code"></el-table-column>
          <el-table-column prop="title" label="广告名称" v-if="show_title"></el-table-column>
          <el-table-column prop="state" label="发布状态" v-if="show_state" >
</el-table>

3.在data的return中定义:

data () {
   return {
      getRowKeys(row) {
          return row.id;
      },
      multipleSelection: [],   // 当前页选中的数据
      tableData: [] // 表格数据
   }  
}

4.js

handleSelectionChange(val){
  this.multipleSelection = val;//勾选放在multipleSelection数组中
},
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容