表格多选的数据是另外展示的,因为展示的数据里也有多选框,需要将这两个双向绑定,请大神帮忙帮忙
已解决
悬赏分:50
- 解决时间 2021-11-29 09:07
点赞 0反对 0举报 0
收藏 0
分享 0
回答2
最佳
-
自问自答环节:
不用“selection-change”,是因为有我解决不了的bug,所以我把表格中“勾选数据行”和“勾选全选”分开了
html:
<template> <div> <div class="content"> <el-table ref="multipleTable" class="main-table" :data="tableData" border tooltip-effect="dark" style="width: 100%" @select="handleSelectionChange" @select-all="handleSelectionChangeAll" :row-key="getRowId"> <el-table-column type="selection" width="55" :reserve-selection="true" /> <el-table-column type="index" label="序号" align="center" width="60" /> <el-table-column label="日期" align="center" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" align="center" width="120"> </el-table-column> <el-table-column prop="address" align="center" label="地址" show-overflow-tooltip> </el-table-column> </el-table> <el-pagination class="pagination" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="5" layout="prev, pager, next" :total="total"> </el-pagination> </div> <div class="content-title"> <span>已选择</span> </div> <div class="content-main"> <div class="main-tips"> <div class="main-tipsContext"> <el-row class="result-list" v-for="(item, index) in multipleSelection" :key="index" > <el-col :span="1"> <el-checkbox v-model="item.yes" @change="delFile(item,index)" :checked="selection(item.id)"></el-checkbox> </el-col> <el-col :span="14"> {{index+1}}、 {{item.name}} </el-col> </el-row> </div> </div> </div> </div> </template>
js:
<script> export default { data() { return { //模拟数据 d: { 1: [ { date: '2016-05-03', name: '王小虎1', address: '上海市普陀区金沙江路 1518 弄', id: 1, yes: false }, { date: '2016-05-02', name: '王小虎2', address: '上海市普陀区金沙江路 1518 弄', id: 2, yes: false }, { date: '2016-05-04', name: '王小虎3', address: '上海市普陀区金沙江路 1518 弄', id: 3, yes: false }, { date: '2016-05-01', name: '王小虎4', address: '上海市普陀区金沙江路 1518 弄', id: 4, yes: false }, { date: '2016-05-08', name: '王小虎5', address: '上海市普陀区金沙江路 1518 弄', id: 5, yes: false } ], 2: [ { date: '2016-05-06', name: '王小虎6', address: '上海市普陀区金沙江路 1518 弄', id: 6, yes: false }, { date: '2016-05-06', name: '王小虎7', address: '上海市普陀区金沙江路 1518 弄', id: 7, yes: false }, { date: '2016-05-06', name: '王小虎8', address: '上海市普陀区金沙江路 1518 弄', id: 8, yes: false }, { date: '2016-05-06', name: '王小虎9', address: '上海市普陀区金沙江路 1518 弄', id: 9, yes: false }, { date: '2016-05-06', name: '王小虎10', address: '上海市普陀区金沙江路 1518 弄', id: 10, ys: false } ], 3: [ { date: '2016-05-06', name: '王小虎11', address: '上海市普陀区金沙江路 1518 弄', id: 11, yes: false }, { date: '2016-05-06', name: '王小虎12', address: '上海市普陀区金沙江路 1518 弄', id: 12, yes: false }, { date: '2016-05-06', name: '王小虎13', address: '上海市普陀区金沙江路 1518 弄', id: 13, yes: false }, { date: '2016-05-06', name: '王小虎14', address: '上海市普陀区金沙江路 1518 弄', id: 14, yes: false }, { date: '2016-05-06', name: '王小虎15', address: '上海市普陀区金沙江路 1518 弄', id: 15, yes: false } ], length: 15, pageNum: 1 } , //当前页数据 tableData: [], //选中项列表 multipleSelection: [], //当前页 currentPage: 1, //总数据数量 total: null, } }, methods: { //初始化假数据,无视 initList(param) { this.currentPage = param.pageNum//页数 this.tableData = param[param.pageNum]//当前页数据 this.total = param.length//总条数 }, //多选 handleSelectionChangeAll(val) { if(val) { val.forEach(one => { one.yes = true }) } this.multipleSelection = [...val] }, //单选 handleSelectionChange(val) { let select = [...val] let flag = '' let exist = '' if(select) { select.forEach(one => { //select和multipleSelection对比元素值是否相等,相等返回true,不相等返回false flag = this.multipleSelection.some(item => (item.fileName === one.fileName && item.id === one.id)) one.yes = true }) } //select和multipleSelection不相等加入multipleSelection,反之移除 if(!flag) { this.multipleSelection = [...select] } else { this.multipleSelection.forEach((one, idx) => { exist = select.some(item => (item.fileName === one.fileName && item.id === one.id)) if(!exist){ this.multipleSelection.splice(idx, 1) } }) } }, //分页 handleCurrentChange(val) { this.d.pageNum = val this.initList(Object.assign(this.d, {pageNum: val})) }, //multipleSelection中的checked是否选中 selection(row){ return this.multipleSelection.some(item => (item.id === row)) }, //当前行id(设置唯一值区分) getRowId(row){ return row.id }, //multipleSelection中取消选中时,删除当前并将列表中的选中取消(通过toggleRowSelection控制) delFile(item,idx) { this.multipleSelection.splice(idx, 1) } }, mounted(){ this.initList(this.d) }, updated(){ this.tableData.forEach((item, index) \=> { this.$refs.multipleTable.toggleRowSelection(item, this.multipleSelection.some(one \=> (item.id \=== one.id))) }) } } </script>
支持 0 反对 0 举报2021-11-28 09:05
-
1、分页加载的table数据 每次都是按照页码查询、即使第一列选中后,切换2页table的数据会重新渲染,不回出现这种问题,看下选中的流水是否需要重置
table多选重置table 添加ref ref="multipleTable" js执行、在数据加载完或时间中执行 this.$refs.multipleTable.clearSelection()
支持 0 反对 0 举报2021-11-28 09:16