Vue如何實(shí)現(xiàn)el-table多選樣式變?yōu)閱芜x效果
更新時(shí)間：2024年05月23日 16:45:23 作者：一個(gè)敲代碼不禿頭的俗人
這篇文章主要介紹了Vue如何實(shí)現(xiàn)el-table多選樣式變?yōu)閱芜x效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Vue el-table多選樣式變?yōu)閱芜x效果
我最近在我的 項(xiàng)目開發(fā)中遇到一個(gè)需要將el-table復(fù)選框變單選的需求，同時(shí)單選某一行會(huì)異步調(diào)用接口，請(qǐng)求后臺(tái)數(shù)據(jù)；我解決問題之后，覺得還是把這些改進(jìn)寫清楚，方便 Vue 的初學(xué)者。
問題
（1）調(diào)用接口異步，可能會(huì)出現(xiàn)慢的接口更新快的接口的數(shù)據(jù)（解決）；
效果圖
1、默認(rèn)進(jìn)來的數(shù)據(jù)
2、選擇父類一條后的數(shù)據(jù)
3、每次切換父類復(fù)選框，只能查到對(duì)應(yīng)的數(shù)據(jù)
代碼：
<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('');為所調(diào)的接口
vue彈窗表格 多選變單選 隱藏左上角全選方塊
效果
給table標(biāo)簽加class
設(shè)置style樣式
::v-deep .statictable .el-table__header .el-checkbox__inner {
display: none;
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在現(xiàn)代的 web 應(yīng)用中,與后端 API 的交互成為了不可或缺的一部分,特別是在 Vue 3 這樣的前端框架中,如何高效地進(jìn)行數(shù)據(jù)請(qǐng)求,處理響應(yīng),本文將帶您深入了解在 Vue 3 中如何與后端 API 進(jìn)行交互,并通過示例代碼幫助您快速上手,需要的朋友可以參考下2025-01-01
Vue+Echarts實(shí)現(xiàn)基本K線圖的繪制
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)基本K線圖的繪制，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
這篇文章主要介紹了使用vue打包時(shí)gzip壓縮的兩種方案小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue項(xiàng)目配置同一局域網(wǎng)可使用ip訪問的操作
這篇文章主要介紹了vue項(xiàng)目配置同一局域網(wǎng)可使用ip訪問的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue2.0 自定義組件的方法（vue組件的封裝）,本文通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Vue中Vue.extend()的使用及解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue常用API、高級(jí)API的相關(guān)總結(jié)
這篇文章主要介紹了Vue常用API、高級(jí)API的相關(guān)總結(jié)，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-02-02
這篇文章主要介紹了vue如何自定義封裝API組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue2與Vue3如何利用install自定義全局確認(rèn)框組件編寫
這篇文章主要介紹了Vue2與Vue3如何利用install自定義全局確認(rèn)框組件編寫方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
本文主要介紹了Vue中的性能優(yōu)化方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08