Vue2 Element el-table多選表格控制選取的思路解讀

更新時(shí)間：2023年07月25日 10:35:50 作者：白瑕

這篇文章主要介紹了Vue2 Element el-table多選表格控制選取的思路解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

前言

構(gòu)建多選表格, 實(shí)現(xiàn)對(duì)監(jiān)聽(tīng)選取狀況, 獲取當(dāng)前選中項(xiàng)行數(shù)據(jù), 獲取當(dāng)前所有選中項(xiàng).

一、構(gòu)建多選表格

構(gòu)建DOM結(jié)構(gòu), 在表格el-table內(nèi)加一個(gè)特殊列即可, 將列類(lèi)型type屬性設(shè)置為selection.

<el-table-column type="selection">
</el-table-column>

注意如果使用v-for指令生成表格, 不要將上面這段代碼直接加在v-for里, 不然每行旁邊都有一個(gè)選項(xiàng)列, 肯定是要分開(kāi)的, 但是怎么分開(kāi)的同時(shí)不拆表呢.

剛開(kāi)始我嘗試過(guò)這種方案, 使用一個(gè)div將需要遍歷生成的列包裹, 在div上v-for遍歷, 但el-table仍然是基于HTML表格的封裝, 這就像往原生HTML表格的列外面套了div, 會(huì)直接破壞表格結(jié)構(gòu).

我差點(diǎn)就忘了這是Vue2…直接把div換成<template></template>就好.

<el-table-column type="selection" width="55">
</el-table-column>
  <template v-for="(item, index) in billTableEvent">
    <el-table-column
      :prop="item.props"
      :label="item.label"
      :align="item.align"
      :min-width="item.minwidth"
      v-if="item.props === 'payAmt'"
      :key="index"
    >
      <template slot-scope="scope">
        {{ scope.row.payAmt }}
      </template>
    </el-table-column>
    <el-table-column
      :prop="item.props"
      :label="item.label"
      :align="item.align"
      :min-width="item.minWidth"
      :key="index"
      v-else
    >
  </el-table-column>
</template>

二、多選表的事件、方法

剛開(kāi)始的時(shí)候, 我覺(jué)得要是將el-table提供的方法作為事件處理函數(shù), 那我豈不是可以同時(shí)操作一堆表格參數(shù), 會(huì)更簡(jiǎn)單些?

然后根本拿不到值…

如果將el-table的方法直接作為事件處理函數(shù), 那么該事件處理函數(shù)會(huì)被直接判定為一個(gè)普通的事件處理函數(shù), 并不能發(fā)揮到其應(yīng)有的作用, 應(yīng)當(dāng)通過(guò)事件拿到el-table相關(guān)參數(shù), 然后在合適的地方調(diào)用el-table提供的方法來(lái)協(xié)助達(dá)成目的.

獲取參數(shù)例：

在這里插入圖片描述

methods: {
  handleSelectChange(selection) {
    this.multipleSelection = selection;
    console.log(selection); // [{...}, {...}]
  },
  handleSelectAll(selection) {
    console.log(this.multipleSelection);
    console.log(selection); // [{...}, {...}]
  },
},

el-table的事件處理函數(shù)內(nèi)除了可以使用事件本身攜帶的參數(shù), 還可以使用el-table的方法, 事實(shí)上這些el-table提供的方法可以在各種能調(diào)用函數(shù)的地方被調(diào)用, 并且它們各自接收固定的值作為參數(shù),

舉例官方的例子, 在表格外調(diào)用toggleSelection:

在這里插入圖片描述

但由于使用這些方法需要接收固定的參數(shù), 在el-table的事件處理函數(shù)里調(diào)用它們可能會(huì)更方便一些.

<div id="empty">
  <el-table
    ref="tableEBBA020M"
    :data="billData"
    @row-click="rowClick"
    @selection-change="handleSelectChange"
  >
    <el-table-column
      v-for="(item, index) in billTableEvent"
      :prop="item.props"
      :label="item.label"
      :align="item.align"
      :min-width="item.minwidth"
      v-if="item.props === 'payAmt'"
      :key="index"
    >
      <template slot-scope="scope">
        {{ scope.row.payAmt }}
      </template>
    </el-table-column>
  </el-table>
</div>

然后自己起一個(gè)事件處理函數(shù)名(額…至少要和事件相關(guān)), 在這個(gè)事件處理函數(shù)里面調(diào)用el-table的方法.

methods: {
  rowClick(row) { // 單選
    this.$refs.tableEBBA020M.toggleRowSelection(row);
  },
}

不需要去考慮太復(fù)雜的事情, 比如設(shè)立一個(gè)變量每次選中就+1偶數(shù)時(shí)選中奇數(shù)取消什么的(已經(jīng)開(kāi)始難受了), 這些細(xì)化的事情Element已經(jīng)幫忙做好了, 完成后會(huì)直接把結(jié)果給你, 也就是事件所攜帶的各種參數(shù).

利用上面的方法拿到el-table的selection和row, 配合一些數(shù)組方法就已經(jīng)可以完成大多數(shù)的多選表格控制.