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