【element-ui】element中的分页，表格多选，数据绑定问题
表格多选的数据是另外展示的，因为展示的数据里也有多选框，需要将这两个双向绑定，请大神帮忙帮忙
回答：
自问自答环节：
不用“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>
回答：
1、分页加载的table数据 每次都是按照页码查询、即使第一列选中后，切换2页table的数据会重新渲染，不回出现这种问题，看下选中的流水是否需要重置
table多选重置
table 添加ref ref="multipleTable"js执行、在数据加载完或时间中执行
this.$refs.multipleTable.clearSelection()
以上是 【element-ui】element中的分页，表格多选，数据绑定问题 的全部内容， 来源链接： utcz.com/a/151241.html
