vue 带全选和多选的表格怎么写_vue element 表格自带全选框 与 自己实现的多选框全选按钮 联动...

用Vue + Element 做一个复杂点的表格,遇到以下问题:表格自带的表头全选框勾选之后,自己实现的全选框没有被勾选

图片描述

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:current-page="currentPage"

background

:page-sizes="[5, 10, 20, 30, 40]"

:page-size="pagesize"

layout="total, sizes, prev, pager, next, jumper"

:total="tableData.length">

全选

确定

data(){

return {

checkAll: false,

isIndeterminate: false,

multipleSelection: [],

tableData: [],

currentPage: 1,

pagesize: 10,

page: 1

}

},methods: {

getRowKeys(row) {

return row.number

},

handleSelectionChange(val) {

let vlength = val.length

this.multipleSelection = val

this.checkAll = vlength === this.pagesize

this.isIndeterminate = vlength > 0 && vlength < this.pagesize

},

handleCheckAllChange() {

this.$refs.multipleTable.toggleAllSelection()

this.isIndeterminate = false

},

handleSizeChange(psize) {

this.pagesize = psize

},

handleCurrentChange(cpage) {

this.currentPage = cpage

},

目前可以解决的是:

1、点击下方全选多选框,可以切换 表格数据 所有行的选中状态

2、当前页勾选一些数据,点击翻页,表头全选框与下方自己实现的全选多选框 均为 indeterminate 状态 (indeterminate 属性用以表示 checkbox 的不确定状态,一般用于实现全选的效果)

3、当没有选中表格数据时,全选框状态为未选中状态

如图片所示,在上图的基础上,再点击(下方的)全选按钮的话,就会把勾选的数据全部变为 未选中状态,而自己变成选中状态

图片描述

需要请教的是:当表格自带的全选框(上方的)勾选之后, 自己实现的多选框(下方的)怎样让它处于选中状态?

ps: 发现这个问题是 漏写了 v-model="checkAll"全选全选

写上之后就可以选中了。

只是 翻页的时候,下方的全选还是选中状态,而不是 indeterminate 状态

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页