快捷導(dǎo)航

vue3.0+element表格獲取每行數(shù)據(jù)代碼示例

更新時(shí)間：2023年09月22日 09:35:51 作者：前端小趴菜·

這篇文章主要給大家介紹了關(guān)于vue3.0+element表格獲取每行數(shù)據(jù)的相關(guān)資料,在element-ui中,你可以通過(guò)為表格的行綁定單擊事件來(lái)獲取表格中的一行數(shù)據(jù),需要的朋友可以參考下

在使用vue3做項(xiàng)目時(shí)經(jīng)常會(huì)遇到表格，對(duì)其進(jìn)行增刪改查等操作，我們就需要獲取當(dāng)前行數(shù)據(jù)，使用插槽，來(lái)獲取，代碼如下

<el-table-column label="操作" width="250">
     <template class="newsoperate" #default="scope">
        <el-button text :icon="EditPen" @click="editnews(scope.row)" class="dele">
                 編輯</el-button>
        <el-button text @click="delkey(scope.row)" :icon="Delete"
                class="dele">刪除</el-button>
     </template>
</el-table-column>

還有在調(diào)用后端接口時(shí)，后端返回的是一個(gè)狀態(tài)值，我們需要轉(zhuǎn)換為用戶可以直接看到的數(shù)據(jù)，而不是狀態(tài)值，我們也需要用到插槽

首先需要定義一個(gè)對(duì)象來(lái)存放

const state: any = {
    1: "已關(guān)注",
    2:"未關(guān)注"
}

然后在需要改變的表格行使用

<el-table-column prop="subscribeStatus" label="訂閱狀態(tài)" width="165">
     <template #default="scope">
            {{ state[scope.row.subscribeStatus] }}
     </template>
 </el-table-column>

總結(jié)

到此這篇關(guān)于vue3.0+element表格獲取每行數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue3.0 element表格獲取數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue 使用axios 數(shù)據(jù)請(qǐng)求第三方插件的使用教程詳解
這篇文章主要介紹了vue 使用axios 數(shù)據(jù)請(qǐng)求第三方插件的使用 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-07-07
vue中對(duì)象數(shù)組去重的實(shí)現(xiàn)
這篇文章主要介紹了vue中對(duì)象數(shù)組去重的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
vue如何在用戶要關(guān)閉當(dāng)前網(wǎng)頁(yè)時(shí)彈出提示的實(shí)現(xiàn)
這篇文章主要介紹了vue如何在用戶要關(guān)閉當(dāng)前網(wǎng)頁(yè)時(shí)彈出提示的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
element ui中表單el-form的label如何設(shè)置寬度
這篇文章主要介紹了element ui中表單el-form的label如何設(shè)置寬度，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
基于vue組件實(shí)現(xiàn)猜數(shù)字游戲
這篇文章主要為大家詳細(xì)介紹了基于vue組件實(shí)現(xiàn)猜數(shù)字游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
vue3使用自定義hooks獲取dom元素的問(wèn)題說(shuō)明
這篇文章主要介紹了vue3使用自定義hooks獲取dom元素的問(wèn)題說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue3嵌套路由中使用keep-alive緩存多層的實(shí)現(xiàn)
本文介紹了Vue3 嵌套路由中使用?keep-alive緩存多層的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vue實(shí)現(xiàn)通訊錄功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)通訊錄功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
vue Render中slots的使用的實(shí)例代碼
本篇文章主要介紹了vue Render中slots的使用的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-07-07
vue實(shí)現(xiàn)幾秒后跳轉(zhuǎn)新頁(yè)面代碼
這篇文章主要介紹了vue實(shí)現(xiàn)幾秒后跳轉(zhuǎn)新頁(yè)面代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09