Vue如何實現el-table多選樣式變?yōu)閱芜x效果
更新時間：2024年05月23日 16:45:23 作者：一個敲代碼不禿頭的俗人
這篇文章主要介紹了Vue如何實現el-table多選樣式變?yōu)閱芜x效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Vue el-table多選樣式變?yōu)閱芜x效果
我最近在我的 項目開發(fā)中遇到一個需要將el-table復選框變單選的需求，同時單選某一行會異步調用接口，請求后臺數據；我解決問題之后，覺得還是把這些改進寫清楚，方便 Vue 的初學者。
問題
（1）調用接口異步，可能會出現慢的接口更新快的接口的數據（解決）；
效果圖
1、默認進來的數據
2、選擇父類一條后的數據
3、每次切換父類復選框，只能查到對應的數據
代碼：
<el-table
ref="multipleTable"
class="el-table-container"
:header-cell-style="{ background: '#dee9fd66' }"
height="260px"
:row-style="{ height: '15px' }"
size="mini"
v-loading="loading"
stripe
border
:data="tabledata"
@selection-change="handleSelectionChange"
@select-all="dialogCheck"
@select="dialogCheck"
>handleSelectionChange(val) {},
dialogCheck: function (selection, row) {
this.$refs.multipleTable.clearSelection();
if (selection.length === 0) {
this.$refs.householdMember.queryFirstPage('');
return;
}
if (row) {
const obj = JSON.parse(JSON.stringify(row));
this.$refs.householdMember.queryFirstPage(obj.id);
this.$refs.multipleTable.toggleRowSelection(row, true);
}
},其中：
this.$refs.householdMember.queryFirstPage(obj.id);和this.$refs.householdMember.queryFirstPage('');為所調的接口
vue彈窗表格 多選變單選 隱藏左上角全選方塊
效果
給table標簽加class
設置style樣式
::v-deep .statictable .el-table__header .el-checkbox__inner {
display: none;
}總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue中beforeRouteLeave實現頁面回退不刷新的示例代碼
這篇文章主要介紹了vue中beforeRouteLeave實現頁面回退不刷新的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
基于 vue-skeleton-webpack-plugin 的骨架屏實戰(zhàn)
這篇文章主要介紹了基于 vue-skeleton-webpack-plugin 的骨架屏實戰(zhàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要介紹了解決Vue watch里調用方法的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue.js綁定HTML class數組語法錯誤有哪些原因導致的呢，該如何解決呢？下面小編給大家分享Vue.js綁定HTML class數組語法錯誤的原因分析，感興趣的朋友一起看看吧2016-10-10
這篇文章主要介紹了Vue-cli打包后如何本地查看的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue打包(hash和history)部署詳細步驟,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了Vant 在vue-cli 4.x中按需加載操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家詳細介紹了Vue實現附件上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
本文主要介紹了Vuex?localStorage的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
Vuejs 實現簡易 todoList 功能 與 組件實例代碼
本文通過實例代碼給大家介紹了Vuejs 實現簡易 todoList 功能 與 組件，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09