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

2020/4/9 5:01:29

编程Tag： vue.js 前端 quasar

本文主要是介绍Quasar Table：展开折叠、全选多选以及记录一些学习过程中的疑惑，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Quasar Table: selection多选表格下方增加全选

原本在 quasar table Multiple-selection 该例子中，表头行的左边已经有全选框了，产品考虑到，数据表格翻到下面后，想直接选全选，不想再翻上去选了，于是就有了，再表格下方增加一个全选的需求。

实现效果

table 全选.gif

实现代码

完整代码请查看：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 该例子中，已经可以实现展开折叠行，只需再在表格上方增加一个展开/折叠全部的按钮即可。

实现效果

table 展开折叠.gif

实现代码

完整代码请查看：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组件框架，也是刚刚接触使用，理解得不深刻，有没有大神能解惑呢？
欢迎各位评论区来指点迷津。