3

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组件框架,也是刚刚接触使用,理解得不深刻,有没有大神能解惑呢?
欢迎各位评论区来指点迷津。

文档

quasar table Multiple-selection

quasar table Example--Internal-expansion-model

QTable-API


北堂棣
6.6k 声望116 粉丝

2016年应届毕业生。