vue中的slot-scope及scope.row用法
更新時間：2022年07月27日 11:03:25 作者：sslcsq
這篇文章主要介紹了vue中的slot-scope及scope.row用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
slot-scope及scope.row的用法
最近在寫后臺管理系統(tǒng) 在寫到修改的地方時 之前的思路是直接把當前對象傳過去 然后在進行修改
現在vue提供了scope 以及 scope.row 可以讓我們更方便的操作數據
slot-scope='scope'作用域插槽中定義一個對象(這里對象被定義為scope)來存儲插槽上綁定的數據的用法scope.row使用ElementUI表格模板渲染數據時使用
當前行數據的獲取也會用到插槽,scope相當于一行的數據， scope.row相當于當前行的數據對象
<el-table :data="userList" stripe style="width: 100%"> ? ? ? <el-table-column prop="username"label="姓名" width="180"></el-table-column> ? ? ? <el-table-column prop="email" label="郵箱" width="180"> </el-table-column> ? ? ? <el-table-column prop="mobile" label="電話"> </el-table-column> ? ? ? <el-table-column label="用戶狀態(tài)"> ? ? ? ? <template slot-scope="scope"> ? ? ? ? ? <el-switch v-model="scope.row.mg_state" @change="userstateChange(scope.row.id, scope.row.mg_state)"> ? ? ? ? ? </el-switch> ? ? ? ? </template> ? ? ? </el-table-column> ? ? ? <el-table-column prop="adress" label="操作"> </el-table-column> </el-table>
:data ==》“userList”
表格綁定了用于存儲數據的數組,里面每一個元素都是數據對象
slot-scope ==》“scope”
這是作用域插槽中定義一個對象(這里對象被定義為scope)來存儲插槽上綁定的數據的用法
當前行的數據對象 ==》 scope.row
在這里使用ElementUI表格模板渲染數據時，當前行數據的獲取也會用到插槽，scope相當于一行的數據， scope.row相當于當前行的數據對象
還是比較方便的~
vue項目中slot-scope="scope"報錯scope is defined but never used
報錯是由于eslint的檢測機制造成的
解決方法
在template上 加上 eslint-disable-next-line 注釋即可
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
很多朋友經常遇到這樣的功能，只允許輸入數字，允許設置初始值、最大值、最小值，今天小編給大家分享示例代碼給大家介紹vue數字輸入框功能，感興趣的朋友一起看看吧2020-01-01
這篇文章主要為大家詳細介紹了Vue3和Vite的那些事，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
v-cloak原理是先通過樣式隱藏內容,然后在內存中進行值的替換,將替換的內容再反饋給界面,數據渲染完場之后,v-cloak 屬性會被自動去除,本文詳細介紹vue中v-cloak的作用和原理解析,感興趣的朋友一起看看吧2023-09-09
vue 動態(tài)改變靜態(tài)圖片以及請求網絡圖片的實現方法
下面小編就為大家分享一篇vue 動態(tài)改變靜態(tài)圖片以及請求網絡圖片的實現方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue-cli3 打包優(yōu)化之 splitchunks詳解
這篇文章主要介紹了vue-cli3 打包優(yōu)化之 splitchunks的相關知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue?@scroll監(jiān)聽滾動條事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
vue使用@scroll監(jiān)聽滾動事件時，@scroll無效問題的解決方法詳解
這篇文章主要介紹了vue使用@scroll監(jiān)聽滾動事件時，@scroll無效問題的解決方法,結合實例形式分析了@scroll監(jiān)聽滾動事件無效問題的原因及相應的解決方法,需要的朋友可以參考下2019-10-10
本篇文章主要介紹了vue之nextTick全面解析，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了一篇Vue、React重點詳解大全，文章內容詳細，通過案例可以更好的理解其相關知識，需要的朋友可以參考下2023-01-01
這篇文章主要為大家介紹了vue封裝動態(tài)表格方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08