關于vxe-table復選框翻頁選中問題及解決
vxe-table復選框翻頁選中問題
根據(jù)vxe-table官方文檔,想要保留勾選中的數(shù)據(jù),我們的代碼中需要設置“row-id”和:checkbox-config中的“reserve”屬性。
簡單寫下html部分:
<vxe-grid row-id="id" :checkbox-config="{ labelField: '', highlight: true, trigger: 'row', reserve: true , range: true}" @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent" > <!--自定義表格內(nèi)容--> </vxe-grid>
因為項目都用到vxe-table,所有這里使用vue的混入應用的項目的所有頁面表格中,在混入文件中寫復選框的事件:
//定義數(shù)據(jù),簡單模擬 data() { return { /*table選中keys*/ selectedRowKeys: [], /*table選中records*/ selectionRows : [], } } //復選框事件(保留翻頁選中的數(shù)據(jù)) selectChangeEvent({ checked, records, reserves, row }) { // console.log(checked ? '勾選事件' : '取消事件') // console.log('當前選中的數(shù)據(jù):' + records) // console.log('翻頁時其他頁的數(shù)據(jù):' + reserves) // console.log('當前選中的數(shù)據(jù)行:' + row ) //勾選選中時 if (checked) { //第一次選數(shù)據(jù),還未進行翻頁時 if (reserves.length == 0){ this.selectedRowKeys = records.map(v => v.id); this.selectionRows = records; }else { //id集合,翻頁存在已選中的數(shù)據(jù)時,拼接新選中的數(shù)據(jù) this.selectedRowKeys = [...reserves.map(v => v.id),...records.map(v => v.id)]; //數(shù)據(jù)集合,翻頁存在已選中的數(shù)據(jù)時,拼接新選中的數(shù)據(jù) this.selectionRows = [...reserves,...records]; } }else { //取消選中時 let idIndex = this.selectedRowKeys.indexOf(row.id); if (idIndex > -1) { //刪除取消選中刪除指定元素id this.$delete(this.selectedRowKeys, idIndex); } let dataIndex = null; for(let i = 0; i < this.selectionRows.length; i++) { if (this.selectionRows[i].id == row.id) { dataIndex = i; break; } } //刪除取消選中的元素整個對象 this.$delete(this.selectionRows, dataIndex); } }, //vxe復選框當前頁全選中方法(保留翻頁選中的數(shù)據(jù)): selectAllEvent({ checked, records, reserves}) { // console.log(checked ? '勾選事件' : '取消事件') // console.log('當前選中的數(shù)據(jù):' + records) // console.log('翻頁時其他頁的數(shù)據(jù):' + reserves) //全選中時 if (checked) { //第一次選數(shù)據(jù),還未進行翻頁時 if (reserves.length == 0){ this.selectedRowKeys = records.map(v => v.id); this.selectionRows = records; }else { //id集合,翻頁存在已選中的數(shù)據(jù)時,拼接新選中的數(shù)據(jù) this.selectedRowKeys = [...reserves.map(v => v.id),...records.map(v => v.id)]; //數(shù)據(jù)集合,翻頁存在已選中的數(shù)據(jù)時,拼接新選中的數(shù)據(jù) this.selectionRows = [...reserves,...records]; } }else { //取消全選時,直接將翻頁數(shù)據(jù)賦值,當前頁數(shù)據(jù)不用加上 this.selectionRows = reserves; this.selectedRowKeys = reserves.map(v => v.id) } }
上面就實現(xiàn)了vxe-table表格復選框選中和全選中事件,在進行翻頁選其他頁的數(shù)據(jù)時,還能保留前面選中的數(shù)據(jù)的功能。
vxe-table使用技巧總結
最近項目中需要用到多層樹table+checkbox勾選功能,選了一些組件,最終決定使用vxe-table。
Vxe-table功能豐富、api也多。官方例子很多比較粗淺,我花了很多精力才弄通了一些功能點及細節(jié)。在此匯總給大伙鋪鋪路。官網(wǎng):vxe-table v4,安裝配置和一般組件庫差不多,就不細說了。由于項目用的是vue2,所以vxe-table用的是v3版本。
1、樹形結構配置
官方配置的樹是一個數(shù)組,需要在tree-config對象里設置transform為true,這樣才會自動把數(shù)組轉換為需要的樹結構。
如果已經(jīng)有一個具有樹形結構的表數(shù)據(jù),則應該設置transform為false。如下圖所示:
2、獲取全局table對象
this.$refs[vxe-table標簽上的ref屬性值]
官方文檔中的table方法api都可以通過該對象調用,如
this.$refs['Tree' + this.activeName][0].setCheckboxRow(row,row.checkFlag) this.$refs['Tree' + this.activeName][0].loadData(this.middleValue) this.$refs['Tree' + this.activeName][0].remove(firstLoop)
3、使用多選框注意事項
在checkbox-config的checkField可以綁定選中屬性字段,勾選狀態(tài)為true,未勾選和半選狀態(tài)為false。
組件會自動渲染勾選和未勾選狀態(tài),但不會自動渲染半選狀態(tài),除非設置checkRowKeys,但這種方式只會在初始化時被觸發(fā)一次,動態(tài)刷新時沒有相應api觸發(fā)。
期間還試了很多方式都無法完美解決該問題,最后是采用slot模板插槽搞定的,我將在第七點詳細介紹。
4、編輯行或單元格注意事項
設置edit-config的mode為cell時是開啟單元格編輯模式,為row時是開啟行編輯模式;設置edit-config的activeMethod來決定該單元格是否允許編輯(該方法的返回值為true或false),如下圖所示,它的意思是只要表格行有childes屬性且該屬性不為空就不能點擊;edit-closed只對 edit-config 配置時有效,單元格編輯狀態(tài)下被關閉時會觸發(fā)該事件,可以通過該事件實現(xiàn)實時保存編輯功能。
想要編輯的列插槽主要有三個屬性配置:
1、field:列字段名,這里需要的是直接可以取到的字段;2、edit-render:可編輯渲染器配置項,具體用法可參考官網(wǎng)vxe-table v3:只對 edit-render 啟用時有效,自定義可編輯組件模板,可傳多個參數(shù),如傳row的話,template里的標簽可以獲取行數(shù)據(jù)。需要注意的是:field值和模板里的v-model值應該為同一個,才能實現(xiàn)雙向綁定,建議提前把想要編輯的字段放到可以直接取到的層級和地方。
5、表尾數(shù)據(jù)合并問題
配置show-footer為true可以開啟表尾,再通過footer-method方法獲取表尾的數(shù)據(jù),該數(shù)據(jù)是一個二維數(shù)組。這里需要注意一個問題:表尾數(shù)據(jù)在觸發(fā)方法獲取后只能通過編輯單元格動態(tài)改變,通過該方法改變二維數(shù)組后是不會更新變化后的值。
6、僅顯示已勾選功能講解
這個功能就是通過loadData方法加載去掉未勾選行列表數(shù)據(jù)和原始表數(shù)據(jù)之間切換。全局table對象下有兩個字段:data和tableData,前者是動態(tài)改變了數(shù)據(jù)的整個初始化表數(shù)據(jù),可以用來還原僅顯示已勾選功能,后者是現(xiàn)在加載著的表數(shù)據(jù),經(jīng)過處理后可以用來激活僅顯示已勾選功能。這里需要注意的是:vxe-table加載列表數(shù)據(jù)后會默認自動生成自定義行數(shù)據(jù)唯一主鍵字段_X_ROW_KEY,我們可以在數(shù)據(jù)處理時用上該字段,如下圖所示:
7、解決初始數(shù)據(jù)半選中狀態(tài)失效問題
我采用插槽方式自定義了checkbox,它的不確定狀態(tài)(半選)字段indeterminate我綁定了判斷是否半選方法:只要節(jié)點是未選中狀態(tài)且有選中狀態(tài)的兒子節(jié)點就是true半選狀態(tài),否則為false未選中狀態(tài)。
由于將checkbox自定義了,vxe-table的checkbox-change失效,所以要重新在vxe-checkbox里面綁定change事件。最簡單的方式就是直接通過setCheckboxRow方法把勾選行設置勾選狀態(tài),它的好處是會把勾選節(jié)點的所有子節(jié)點一并設置是否勾選狀態(tài)。
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue-cli中devServer.proxy相關配置項的使用
這篇文章主要介紹了vue-cli中devServer.proxy相關配置項的使用詳解,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04Element中select多數(shù)據(jù)加載優(yōu)化的實現(xiàn)
本文主要介紹了Element中select多數(shù)據(jù)加載優(yōu)化的實現(xiàn),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09vue 實現(xiàn)強制類型轉換 數(shù)字類型轉為字符串
今天小編就為大家分享一篇vue 實現(xiàn)強制類型轉換 數(shù)字類型轉為字符串,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11詳解ElementUI之表單驗證、數(shù)據(jù)綁定、路由跳轉
本篇文章主要介紹了ElementUI之表單驗證、數(shù)據(jù)綁定、路由跳轉,非常具有實用價值,需要的朋友可以參考下2017-06-06vue里面v-bind和Props 利用props綁定動態(tài)數(shù)據(jù)的方法
今天小編就為大家分享一篇vue里面v-bind和Props 利用props綁定動態(tài)數(shù)據(jù)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08