element-ui table 的翻页记忆选中
公司中台项目刚开始开发,用了vue+element,需要许多前置调研,table的翻译记忆选中就是其中之一。
template:
<el-table :ref="tableRef" :data="tableData" @select-all="handleSelect" @select="handleSelect" > <el-table-column type="selection" width="55" > </el-table-column> <el-table-column v-for="item in tableColumns" :key="item" :property="item.property" :label="item.label" :width="item.width" > </el-table-column> </el-table> <el-pagination layout="total,prev, pager, next, jumper" :page-size="5" @current-change="handleCurrentChange" :current-page.sync="currentPage" :total="10"> </el-pagination>
tableRef 是上级传入的props,为了区分多个表格同时存在的情况。
tableData 和 tableColumns 都是从组件外传入的,不难理解。
将 select 和 select-all 事件集中到同一个事件 handleSelect, 因为用到的数据都是该事件返回的 row 。
翻页的 currentPage 和 handleCurrentChange 是翻页组件的当前页和页码改变的事件。
methods:
handleSelect(val){ const hasSave = this.selected.find(item => { return item.page === this.currentPage }) if(hasSave){ hasSave.rows = this.tableData.filter(item => { return val.includes(item) }) }else{ this.selected.push({ page: this.currentPage, rows: val }) } }, handleCurrentChange(val){ // 向上传递事件 this.$emit('pageChange',val) }, toggleSelection(){ this.$refs[this.tableRef].clearSelection() const target = this.selected.find(item => { return item.page === this.currentPage }) if(!target) return const rows = target.rows if(rows && rows.length>0){ this.$nextTick(()=>{ rows.forEach(row => { this.$refs[this.tableRef].toggleRowSelection(row) }) }) } }, getSelected(){ if(this.selected.length === 0){ return [] } let result = [] this.selected.forEach(item => { result = [...result,...item.rows] }) return result }
当页码改变时,传递数据到外层请求数据,在本组件watch tableData的变化
watch: { tableData(){ this.toggleSelection() } },
最后获取执行具体逻辑就不解释了,都是比较简单的,有需要可以留言或者私信。