478
社区成员
发帖
与我相关
我的任务
分享关于element ui e-tbale做分页后 全选checkbox的问题
image.png1334×381 11.3 KB
image.png1473×435 15.5 KB
第4页勾掉一条数据 当前页的全选 是去掉了 ，切换到别的页签发现还是在的 ，这个需要怎么优化，没找到什么对应的好的API
代码 ：
html：
<el-table
:data=“tableData.slice((currentPage-1)pagesize,currentPagepagesize)”
ref=“tables”
style=“width: 100%”
@select=“handleSelectionOne”
@select-all=“selectAll”
:row-key=“getRowkeys”>
<el-table-column
type=“selection”
:reserve-selection=“true”
width=“55”>
</el-table-column>
<el-table-column
prop=“date”
label=“日期”
width=“180”>
</el-table-column>
<el-table-column
prop=“name”
label=“姓名”
width=“180”>
</el-table-column>
<el-table-column
prop=“address”
label=“地址”>
</el-table-column>
</el-table>
<el-pagination
layout=“prev, pager, next”
@current-change=“current_change”
:page-size=“pagesize”
:total=“total”
background>
</el-pagination>
js：
data () {
return {
allDataFlag: false,
getRowkeys (row) {
return row.date
},
total: 11,//默认数据总数
pagesize: 3,//每页的数据条数
currentPage: 1,//默认开始页面
multipleSelection: [],
options: [
{
value: ‘选项0’,
label: ‘全选’
},
{
value: ‘选项1’,
label: ‘黄金糕’
}, {
value: ‘选项2’,
label: ‘双皮奶’
}, {
value: ‘选项3’,
label: ‘蚵仔煎’
}, {
value: ‘选项4’,
label: ‘龙须面’
}, {
value: ‘选项5’,
label: ‘北京烤鸭’
}],
value5: [],
oldOptions: [],
wym_select: null,
gender: ‘’,
tableData: [{
date: ‘2016-05-12’,
name: ‘王小虎’,
address: ‘上海市普陀区金沙江路 1518 弄’
}, {
date: ‘2016-05-14’,
name: ‘王小虎’,
address: ‘上海市普陀区金沙江路 1517 弄’
}, {
date: ‘2016-05-11’,
name: ‘王小虎’,
address: ‘上海市普陀区金沙江路 1519 弄’
},
{
date: ‘2016-05-13’,
name: ‘王小虎’,
address: ‘上海市普陀区金沙江路 1516 弄’
},
{
date: ‘2016-05-21’,
name: ‘王小虎’,
address: ‘上海市普陀区金沙江路 1516 弄’
},
{
date: ‘2016-05-22’,
name: ‘王小虎’,
address: ‘上海市普陀区金沙江路 1516 弄’
},
{
date: ‘2016-05-23’,
name: ‘王小虎’,
address: ‘上海市普陀区金沙江路 1516 弄’
},
{
date: ‘2016-05-24’,
name: ‘王小虎’,
address: ‘上海市普陀区金沙江路 1516 弄’
},
{
date: ‘2016-05-25’,
name: ‘王小虎’,
address: ‘上海市普陀区金沙江路 1516 弄’
},
{
date: ‘2016-05-26’,
name: ‘王小虎’,
address: ‘上海市普陀区金沙江路 1516 弄’
},
{
date: ‘2016-05-27’,
name: ‘王小虎’,
address: ‘上海市普陀区金沙江路 1516 弄’
}]
}
},
methods: {
change (e) {
console.log(e)
},
handleSelectionOne (val) {
this.multipleSelection = val;
this.allDataFlag = this.multipleSelection.length === this.tableData.length ? true : false
},
clear () {
this.$refs.tables.clearSelection();
},
current_change (currentPage) {
this.currentPage = currentPage
},
selectAll (val) {
this.allDataFlag = !this.allDataFlag
for (let f = 0; f < this.tableData.length; f++) {
this.$refs.tables.toggleRowSelection(this.tableData[f], this.allDataFlag)
}
},
created () {
this.total = this.tableData.length;
}
}
...全文
请发表友善的回复…
发表回复
weixin_38135532 2019-02-12
- 打赏
- 举报
this.$refs.tables.selection 这里是所有的数据 11 条
每次翻页的时候 this.$refs.tables.data 这里是 4条数据 当前页的数据
根据我之前说的全选逻辑 你看一下是不是全选
weixin_38102077 2019-01-31
- 打赏
- 举报
你把这个试一下 看看是不是你要的效果
不过应该放假了吧？怎么还在写代码？
weixin_38128201 2019-01-31
- 打赏
- 举报
{{tableData}}
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
weixin_38121458 2019-01-31
- 打赏
- 举报
我在翻页时重置了this.$refs.tables.data 。我想要的效果是 我全选后 在第一页去掉一条 切到第二页去 全选钩子也是去掉的 。我现在切过去他还是在的 。有点懵逼
weixin_38079399 2019-01-31
- 打赏
- 举报
这里的全选判断逻辑是：
选中的数据存在这里：
this.$refs.tables.selection
当这个为空时候 不全选
this.$refs.tables.selection 包含 this.$refs.tables.data 时候为全选
大于0 但是 不包含时候 是半选
你点击全选的时候 把所有的数据 11 条 全部加入到了 this.$refs.tables.selection
每次翻页的时候 重置 this.$refs.tables.data
weixin_38066613 2019-01-31
- 打赏
- 举报
您好，对于翻页的时候:
保存记录是设置过了，但是 我有疑问 就是 table的数据是根据pagesize 的变动而变动的
image.png804×117 9.83 KB
，而我点击全选的时候
image.png825×162 12.2 KB
设置每页数据都勾选，在切换页签的时候，每个页签下table 的全选框可能是根据数据是否全部勾选 计算的（不是很清楚），导致现在 我假设在1页签去掉一条数据，切到2全选钩子还是在。应该和你说的判断当前页的key是否都在selection中无关 因为 切到2页签后 肯定是全选的o
保存记录是设置过了，但是 我有疑问 就是 table的数据是根据pagesize 的变动而变动的
image.png804×117 9.83 KB
，而我点击全选的时候
image.png825×162 12.2 KB
设置每页数据都勾选，在切换页签的时候，每个页签下table 的全选框可能是根据数据是否全部勾选 计算的（不是很清楚），导致现在 我假设在1页签去掉一条数据，切到2全选钩子还是在。应该和你说的判断当前页的key是否都在selection中无关 因为 切到2页签后 肯定是全选的oweixin_38136989 2019-01-31
- 打赏
- 举报
Oyome752498:
第4页勾掉一条数据 当前页的全选 是去掉了 ，切换到别的页签发现还是在的 ，这个需要怎么优化，没找到什么对应的好的API
后台分页：
1、只选当前页：
每次分页、排序和改变pageSize 以及各种操作之后（删除编辑或者其他）时候清空 selection
2、保存选中记录，也就是翻页时候：
每次分页、排序和改变pageSize 追加 selection
各种操作之后（删除编辑或者其他）时候清空 selection
全选的状态 判断当前页的key是否都在 selection 中