Quasar Table：展开折叠、全选多选 以及 记录一些学习过程当中的疑惑

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)}`)
    }

在代码中也有注释，实现清空已选中的效果这里，有两种方法：
一、使用QTable-API提供的clearSelection方法来实现清空

this.$refs.table.clearSelection()

二、直接赋值为[] 实现清空

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 = []
    }
  }

在代码中也有注释，实现设置所有展开折叠的效果这里，有两种方法：
方法一、 能够直接 this.expanded 添加全部行的row-key即name

this.data.forEach(item => {          
          this.expanded.push(item.name)
        })

方法二、先获取要展开的全部行的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

quasar table Example--Internal-expansion-model

QTable-API