如何快速的做网站,网站制作评价,jsp手机销售网站的建设,网站可信认证Element UI Table 翻页保存之前的数据,网上找了一些,大部分都是用**:row-key** 和 reserve-selection,但是我觉得有bug,我明明翻页了…但是全选的的个框还是勾着的(可能是使用方法不对,要是有好使的…请cute我一下…感谢) 所以自己写了一个…
思路:
手动勾选的时候,将数据保存… Element UI Table 翻页保存之前的数据,网上找了一些,大部分都是用**:row-key** 和 reserve-selection,但是我觉得有bug,我明明翻页了…但是全选的的个框还是勾着的(可能是使用方法不对,要是有好使的…请cute我一下…感谢) 所以自己写了一个…
思路:
手动勾选的时候,将数据保存 查看文档,发现有两个手动勾选触发的方法 select 和 select-all,这两个返回的都是当前选中的数据,所以我们可以直接保存回显的话,我们调用官网给的方法 toggleRowSelection() 调用的位置在,请求数据的方法中,因为请求完数据后,数据一定是最新的,table列表一定会刷新…所以我们只要在 列表渲染的数据 里 找到 保存的数据 就将其勾选.
代码如下,直接拷贝可用…因为是个demo,数据是写死变化的,根据自己的业务替换吧.
template!--table 翻页--divel-tablerefmultipleTable:datatableDatatooltip-effectdarkstylewidth: 100%select-allselectionChangeselectselectionChangeel-table-column typeselection width55 /el-table-columnel-table-column label日期 width120template slot-scopescope{{ scope.row.date }}/template/el-table-columnel-table-column propname label姓名 width120 /el-table-columnel-table-column propaddress label地址 show-overflow-tooltip/el-table-column/el-tableel-paginationsize-changesizeChangecurrent-changecurrentChange:current-pagepage.current:page-sizepage.pageSizelayoutprev, pager, next:totaltotal/el-pagination/div
/templatescript
export default {data() {return {total: 4,page: {current: 1,pageSize: 2,},tableData: [{id: 0,date: 2016-05-03,name: 王小虎0,address: 上海市普陀区金沙江路 1518 弄,},{id: 1,date: 2016-05-03,name: 王小虎1,address: 上海市普陀区金沙江路 1518 弄,},],multipleSelection: [],}},methods: {currentChange(val) {this.page.current valthis.getList()},sizeChange(val) {this.page.pageSize valthis.page.current 1this.getList()},getList() {if (this.page.current 1) {this.tableData [{id: 0,date: 2016-05-03,name: 王小虎0,address: 上海市普陀区金沙江路 1518 弄,},{id: 1,date: 2016-05-03,name: 王小虎1,address: 上海市普陀区金沙江路 1518 弄,},]} else {this.tableData [{id: 2,date: 2016-05-03,name: 王小虎2,address: 上海市普陀区金沙江路 1518 弄,},{id: 3,date: 2016-05-03,name: 王小虎3,address: 上海市普陀区金沙江路 1518 弄,},]}// 根据查询出来的数据,回显勾选状态this.$nextTick((){this.tableData.forEach(row {if(this.multipleSelection.some((row1) row.id row1.id)){this.$refs.multipleTable.toggleRowSelection(row)}})})},selectionChange(val) {this.multipleSelection val},},
}
/script
