vue+element實現table外部的全選按鈕
- 在項目中，我們可能會遇到在列表的外面有一個獨立的全選按鈕，接下來就描述一下具體的實現過程
- 首先我們讀element的文檔可以知道，el-table上是自帶toggleAllSelection和clearSelection這兩個方法的
- 一個是用於多選表格，切換所有行的選中狀態
- 一個是清空用戶的所有選擇
- 所以就可以通過ref鏈的形式，在點擊外部的獨立按鈕的時候，觸發相應的方法來實現列表全選與否。
- 我們可以知道，el-checkbox上有一個change事件，是自帶一個參數的，選中為true，非選中為false，此時不難想到，可以利用這個參數作為一個表示，來調用el-table上的那兩個方法
// 點擊獨立全選按鈕時，方法中做的事情
selectBottom ? this.$refs.multipleTable.toggleAllSelection() : this.$refs.multipleTable.clearSelection()
- 此時我們會發現，雖然實現了點擊獨立按鈕來控制列表全選與否，但是這個獨立的按鈕樣式卻不會發生變化，這是為什么呢
- 讀文檔，第一想到的是利用一個標識來控制checked的true和false，來實現全選的樣式改變（不過這樣不行，也不清楚為啥）
- 最后是可以通過改變el-checkbox的綁定值——value來實現控制樣式
- 此時我們會發現，已經可以發生樣式的改變了，但是通過點擊el-table中自帶的全選和每列項，並不會改變外部按鈕的狀態
- 這個時候可以通過el-table上的事件來完成了
- select——當用戶手動勾選數據行的 Checkbox 時觸發的事件
- select-all——當用戶手動勾選全選 Checkbox 時觸發的事件
- 這兩個方法可以拿到一個參數，這個參數里放的就是列表中所有的數據，可以通過判斷參數的length是否等於所有數據的length來控制el-checkbox的value，來實現列表中的選中和外部獨立選中的關聯。
這時候，我們利用element來實現一個外部獨立的全選列表按鈕就完成了
<el-table
ref="multipleTable"
v-loading="listLoading"
:data="dataList"
@select-all="selectTop"
@select="selectTop"
></el-table>
<el-checkbox
:value="select"
label="全選"
name="type"
@change="toggleSelection"
/>
// 點擊列表選中
selectList(selection) {
this.select = selection.length === this.dataList.length
},
// 獨立全選
toggleSelection(selectBottom) {
selectBottom ? this.$refs.multipleTable.toggleAllSelection() : this.$refs.multipleTable.clearSelection()
this.select = selectBottom
},
如果有出入的地方，歡迎指出，立馬改正，有想一起學習前端的小伙伴，歡迎加QQ1356770685
