Quasar Table: selection多选 表格下方增加全选
原本在 quasar table Multiple-selection 该例子中,表头行的左边已经有全选框了,产品考虑到,数据表格翻到下面后,想直接选全选,不想再翻上去选了,于是就有了,再表格下方增加一个全选的需求。
实现效果
实现代码
完整代码请查看:Quasar Table: selection多选/全选
这里只粘贴核心代码:
在q-table上绑定update:selected方法:
@update:selected="getSelected"
在q-table内,增加v-slot:bottom-row
:
<template v-slot:bottom-row>
<q-tr>
<q-td colspan="100%">
<q-checkbox
toggle-indeterminate
v-model="checkAll"
label="全选"
@input="clickAllSelect"
class="vbot-check-all"
></q-checkbox>
</q-td>
</q-tr>
</template>
methods:
getSelected (newSelected) {
console.log(
`getSelected获取newSelected: ${JSON.stringify(newSelected)}`
)
this.selected = newSelected
if (this.selected.length !== 0) {
this.checkAll = null
} else {
this.checkAll = false
}
},
clickAllSelect (val) {
this.checkAll = !!val
if (val) {
this.data.forEach(item => {
this.selected.push(item)
})
} else {
// 实现清空已选中的效果
// this.$refs.table.clearSelection() // 使用clearSelection方法 实现清空
this.selected = [] // 直接赋值为[] 实现清空
}
console.log(`clickAllSelect获取selected: ${JSON.stringify(this.selected)}`)
}
在代码中也有注释,实现清空已选中的效果这里,有两种方法:
1、使用QTable-API提供的clearSelection
方法来实现清空
this.$refs.table.clearSelection()
2、直接赋值为[] 实现清空
this.selected = []
可以打开上面贴的完整代码,在codepen中自己尝试一下这两种方法。
这里,我有一些疑惑的地方,既然直接赋值就能实现,那么,为什么quasar 还要再给出一个方法呢?
quasar QTable-API提供的clearSelection
方法:
Name
clearSelection () => void 0
Description
Clears user selection (emits 'update:selected' with empty array)
Quasar Table: 展开折叠行 实现展开全部/折叠全部
在 quasar table Example--Internal-expansion-model 该例子中,已经可以实现展开折叠行,只需再在表格上方增加一个展开/折叠全部的按钮即可。
实现效果
实现代码
完整代码请查看:Quasar Table: 展开折叠行、展开全部/折叠全部
这里只粘贴核心代码:
表格上方增加一个展开/折叠全部的按钮:
<q-btn
flat
type="text"
outline
class="vbot-btn"
:icon="expand ? 'remove' : 'add'"
:label="expand ? '收起全部' : '展开全部'"
@click="changeExpand"
/>
q-table
绑定expanded
,expanded的具体解释请查阅QTable-API:
:expanded.sync="expanded"
data中增加:
expand: false, // 是否全部展开
expanded: [], // Keeps the array with expanded rows keys
methods:
changeExpand () {
this.expand = !this.expand
console.log(this.expanded)
if (this.expand) {
// 如果是点了展开,全部row-key="name"的行都展开
// 方法1
this.data.forEach(item => {
// 可以直接 this.expanded 添加所有行的row-key即name
this.expanded.push(item.name)
})
// 方法2
// let arr = []
// this.data.forEach(item => {
// // 先获取要展开的所有行的row-key即name
// arr.push(item.name)
// })
// // 使用setExpanded方法设置 Sets the expanded rows keys array
// this.$refs.table.setExpanded (arr)
} else {
this.expanded = []
}
}
在代码中也有注释,实现设置全部展开折叠的效果这里,有两种方法:
方法1、 可以直接 this.expanded 添加所有行的row-key即name
this.data.forEach(item => {
this.expanded.push(item.name)
})
方法2、先获取要展开的所有行的row-key即name,然后再使用QTable-API提供的setExpanded
方法设置expanded
let arr = []
this.data.forEach(item => {
// 先获取要展开的所有行的row-key即name
arr.push(item.name)
})
// Sets the expanded rows keys array
this.$refs.table.setExpanded(arr)
可以打开上面贴的完整代码,在codepen中自己尝试一下这两种方法。
这里,我同样有一些疑惑的地方,既然能直接操作this.expanded来实现,那么,为什么 quasar 还要再给出一个setExpanded
方法呢?上面第二种写法,明显看起来不如第一种简洁。
可能是我对vue理解的比较浅显,对quasar组件框架,也是刚刚接触使用,理解得不深刻,有没有大神能解惑呢?
欢迎各位评论区来指点迷津。
文档
quasar table Multiple-selection
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。