当前位置: 首页 > Web前端 > vue.js

QuasarTable:展开折叠,全选和多选,记录学习过程中的一些疑惑

时间:2023-03-31 23:18:17 vue.js

QuasarTable:在选择多选表下面添加所有选择原来在quasartableMultiple-selection这个例子中,有已经是一个全选框被选中了。产品考虑到翻到数据表底部后,想直接全选,不想再上去选择,所以需要在表格底部加一个全选.实现效果请查看代码完整代码:QuasarTable:selectionmulti-select/all-select这里只贴核心代码:在q-table上绑定update:selected方法:@update:selected="getSelected"在q-table中,添加v-slot:bottom-row:方法:getSelected(newSelected){console.log(`getSelectedgetsnewSelected:${JSON.stringify(newSelected)}`)this.selected=newSelectedif(this.selected.length!==0){this.checkAll=null}else{this.checkAll=false}},clickAllSelect(val){this.checkAll=!!valif(val){this.data.forEach(item=>{this.selected.push(item)})}else{//实现清空选中效果//this.$refs.table.clearSelection()//使用clearSelection方法实现清空this.selected=[]//直接赋值给[]实现清空}console.log(`clickAllSelecttogetselected:${JSON.stringify(this.selected)}`)}代码中也有注释实现清除选中的效果。这里有两种方法:1.使用QTable-API提供的clearSelection方法清除this.$refs.table.clearSelection()2.直接赋值给[]清除this.selected=[]完整代码可以打开贴在上面并在代码笔中自己尝试这两种方法。在这里,我有些疑惑。既然可以实现直接赋值,为什么quasar还要给出另外一种方法呢?quasarQTable-API提供的clearSelection方法:NameclearSelection()=>void0DescriptionClearsuserselection(emits'update:selected'withemptyarray)QuasarTable:Expandandcollapserowstoimplementexpandall/collapseallinquasartableExample--Internal-expansion-model在本例中,已经可以展开和折叠行,只需在表格上方添加一个展开/折叠所有按钮即可。实现效果的完整代码请看:QuasarTable:Expandandfoldrows,expandall/collapseall这里只贴核心代码:在表格上方添加一个expand/collapseall按钮:q-tablebindingexpanded,请参考QTable-API::expanded.sync="expanded"中expanded的具体解释data:expand:false,//是否展开全部expanded:[],//保留数组expandedrowskeymethods:changeExpand(){this.expand=!this.expandconsole.log(this.expanded)if(this.expand){//如果点击展开,所有row-key="name"的行都会beexpanded//方法一this.data.forEach(item=>{//可以直接把所有行的row-key加到this.expanded中,也就是namethis.expanded.push(item.name)})//方法2//letarr=[]//this.data.forEach(item=>{////首先获取第k行所有要展开的行的ey,也就是name//arr.push(item.name)//})////使用setExpanded方法设置展开edrowskeysarray//this.$refs.table.setExpanded(arr)}else{this.expanded=[]}}代码中也有注释实现设置全部展开和折叠的效果这里有两个methods:方法一,可以直接将所有行的row-key添加到this.expanded中,即namethis.data.forEach(item=>{this.expanded.push(item.name)})方法二.先获取所有要展开的行的row-keykey为name,然后使用QTable-API提供的setExpanded方法设置展开letarr=[]this.data.forEach(item=>{//首先获取所有要展开的行的row-key,即namearr.push(item.name)})//设置展开的行键数组this.$refs.table.setExpanded(arr)即可打开完整代码贴在上面,自己去codepen试试这两个方法这里,我也有些疑惑既然直接操作this.expanded就可以实现,为什么quasar又给了一个setExpanded方法呢?上面第二种写法显然不如第一种简洁。可能是我对vue的理解比较浅,刚刚接触quasar组件框架,理解不深。有高手可以解释一下吗?欢迎评论区指点。文档quasartableMultiple-selectionquasartableExample--Internal-expansion-modelQTable-API