-
选中记忆
<Table no-data-text="暂无任何数据" stripe :columns="column" :data="listData" ref="selection" @on-select="handleSelectRow" @on-select-cancel="handleCancelRow" @on-select-all="handleSelectAll" @on-selection-change="handleCancelAll" ></Table>
//选中某一项 handleSelectRow(selection,row){ let flag = this.selectedData.some(item => item.id == row.id); if(!flag){ this.selectedData.push(row); } }, //取消选中某一项 handleCancelRow(selection,row){ this.selectedData.forEach((item,index) => { if(item.id == row.id){ this.selectedData.splice(index,1); } }) }, //点击全选 handleSelectAll(){ let current = this.$refs.selection.getSelection(); current.forEach(temp => { let flag = this.selectedData.some(item => item.id == temp.id); if(!flag){ this.selectedData.push(temp); } }) }, //点击取消全选 handleCancelAll(){ let current = this.$refs.selection.getSelection(); if(!current || current.length == 0){ let current = this.listData; current.forEach(temp => { this.selectedData.forEach((item,index) => { if(item.id == temp.id){ this.selectedData.splice(index,1); } }) }) } }, //查询表格数据 getData(){ this.axios.post('/xxxx/xxxpath', params, function(data) { if (data.rtnCode === '0000') { this.listData = list; // 由于渲染时间的原因,使用setTimeout规避 setTimeout(() => { this.setChecked(); }, 0); }else{ this.$Message.error(data.rtnMsg); } }) }, //设置选中记忆 setChecked(){ if(this.selectedData.length <=0){ return; } let current = this.listData; current.forEach(temp => { this.selectedData.forEach((item,index) => { if(item.id == temp.id){ this.$refs.selection.$refs.tbody.objData[index]._isChecked = true; } }) }) }
-
导出
exportData(){ if(this.selectedData.length <= 0){ this.$Message.error('请先选择需要导出的数据'); return; }else{ this.$refs.selection.exportCsv({ filename: `${new Date()}导出数据`, //columns: this.column.filter((col, index) => index < 4), //可设置导出列 data: this.selectedData }); } }
vue+iview实现表格选中记忆+前端导出功能
最新推荐文章于 2024-11-08 14:25:38 发布