vue3.0+element表格獲取每行數(shù)據(jù)代碼示例
更新時間：2023年09月22日 09:35:51 作者：前端小趴菜·
這篇文章主要給大家介紹了關(guān)于vue3.0+element表格獲取每行數(shù)據(jù)的相關(guān)資料,在element-ui中,你可以通過為表格的行綁定單擊事件來獲取表格中的一行數(shù)據(jù),需要的朋友可以參考下
在使用vue3做項目時經(jīng)常會遇到表格，對其進行增刪改查等操作，我們就需要獲取當前行數(shù)據(jù)，使用插槽，來獲取，代碼如下
<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)用后端接口時，后端返回的是一個狀態(tài)值，我們需要轉(zhuǎn)換為用戶可以直接看到的數(shù)據(jù)，而不是狀態(tà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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue全局自定義指令和局部自定義指令的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要為大家詳細介紹了VUE響應(yīng)式原理的實現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
利用Vite搭建Vue3+ElementUI-Plus項目的全過程
vue3如今已經(jīng)成為默認版本了,相信大多數(shù)公司已經(jīng)全面擁抱vue3了,下面這篇文章主要給大家介紹了關(guān)于利用Vite搭建Vue3+ElementUI-Plus項目的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)三級菜單效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用
這篇文章主要介紹了vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue-router優(yōu)化import引入過多導(dǎo)致index文件臃腫問題
這篇文章主要為大家介紹了Vue-router優(yōu)化import引入過多導(dǎo)致index文件臃腫問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要給大家介紹了關(guān)于Vue自定義加水波紋效果指令的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-02-02
vue-cli3項目升級到vue-cli4 的方法總結(jié)
這篇文章主要介紹了vue-cli3項目升級到vue-cli4 的方法總結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了Vuejs第十篇之vuejs父子組件通信的相關(guān)資料,本文介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
今天小編就為大家分享一篇vue 自定義指令自動獲取文本框焦點的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08