element?table?點擊某一行中按鈕加載功能實現

在Element UI中,實現表格(element-table)中的這種功能通常涉及到數據處理和狀態(tài)管理。當你點擊某一行的按鈕時,其他行的按鈕需要動態(tài)地切換為加載狀態(tài),這可以通過以下步驟實現:
1.表格組件:使用el-table組件,并且為每一行的按鈕添加事件監(jiān)聽器,如@click。
<el-table :data="items" @selection-change="handleSelectionChange">
<el-table-column type="index"></el-table-column>
<el-table-column prop="action" label="操作">
<template slot-scope="scope">
<el-button v-if="!isLoading[scope.$index]" @click="loadData(scope.$index)" :disabled="isLoading[scope.$index]">加載</el-button>
<!-- 加載中狀態(tài) -->
<span v-if="isLoading[scope.$index]">加載中...</span>
</template>
</el-table-column>
</el-table>2.狀態(tài)管理:維護一個數組isLoading,用于跟蹤每行的數據加載狀態(tài)。初始設置所有元素為false。
data() {
return {
items: [],
isLoading: Array.from({ length: this.items.length }, () => false),//此處可以放在接口中
};
},3.加載方法:在loadData方法中,當點擊某一行的按鈕時,更新對應索引處的狀態(tài)為true,然后調用實際的數據加載API。同時,可以設置一個異步操作來模擬加載過程,例如使用axios或Promise。
methods: {
loadData(index) {
this.isLoading[index] = true; // 設置為加載狀態(tài)
this.fetchData(index).then(() => {
// 調整狀態(tài)為已完成
this.isLoading[index] = false;
//如果沒有響應式用下面的設置
//this.$set(this.isLoading, index, false);
}).catch(() => {
// 處理加載失敗
});
},
fetchData(index) {
return new Promise((resolve, reject) => {
// 模擬異步加載
setTimeout(() => {
// 假設這里是你獲取數據的邏輯
this.items[index].dataToLoad = '數據內容';
resolve();
}, 2000); // 加載時間
});
},
},4.選擇改變事件:使用@selection-change事件監(jiān)聽用戶選擇的行,確保只對選中的行執(zhí)行加載操作。
handleSelectionChange(selection) {
selection.forEach((index) => {
this.loadData(index);
});
},到此這篇關于element table 點擊某一行中按鈕加載功能實現的文章就介紹到這了,更多相關element table點擊按鈕加載內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
layui form.render(''select'', ''test2'') 更新渲染的方法
今天小編就為大家分享一篇layui form.render('select', 'test2') 更新渲染的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
微信小程序非swiper組件實現的自定義偽3D輪播圖效果示例
這篇文章主要介紹了微信小程序非swiper組件實現的自定義偽3D輪播圖效果,涉及微信小程序事件響應及元素屬性動態(tài)操作實現輪播圖效果相關技巧與注意事項,需要的朋友可以參考下2018-12-12
微信小程序使用scroll-view標簽實現自動滑動到底部功能的實例代碼
本文通過實例代碼給大家介紹了微信小程序使用scroll-view標簽實現自動滑動到底部功能,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2018-11-11

