vue中的slot-scope及scope.row用法
slot-scope及scope.row的用法
最近在寫后臺管理系統(tǒng) 在寫到修改的地方時 之前的思路是直接把當(dāng)前對象傳過去 然后在進(jìn)行修改
現(xiàn)在vue提供了scope 以及 scope.row 可以讓我們更方便的操作數(shù)據(jù)
slot-scope='scope'作用域插槽中定義一個對象(這里對象被定義為scope)來存儲插槽上綁定的數(shù)據(jù)的用法scope.row使用ElementUI表格模板渲染數(shù)據(jù)時使用
當(dāng)前行數(shù)據(jù)的獲取也會用到插槽,scope相當(dāng)于一行的數(shù)據(jù)， scope.row相當(dāng)于當(dāng)前行的數(shù)據(jù)對象
<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”
表格綁定了用于存儲數(shù)據(jù)的數(shù)組,里面每一個元素都是數(shù)據(jù)對象
slot-scope ==》“scope”
這是作用域插槽中定義一個對象(這里對象被定義為scope)來存儲插槽上綁定的數(shù)據(jù)的用法
當(dāng)前行的數(shù)據(jù)對象 ==》 scope.row
在這里使用ElementUI表格模板渲染數(shù)據(jù)時，當(dāng)前行數(shù)據(jù)的獲取也會用到插槽，scope相當(dāng)于一行的數(shù)據(jù)， scope.row相當(dāng)于當(dāng)前行的數(shù)據(jù)對象
還是比較方便的~
vue項目中slot-scope="scope"報錯scope is defined but never used
報錯是由于eslint的檢測機(jī)制造成的
解決方法
在template上 加上 eslint-disable-next-line 注釋即可
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue綁定class的三種方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了一個因@click.stop引發(fā)的bug的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了vue 實現(xiàn)走馬燈效果，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了詳解vue或uni-app的跨域問題解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue中的vue-print-nb如何實現(xiàn)頁面打印
這篇文章主要介紹了vue中的vue-print-nb如何實現(xiàn)頁面打印，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了require.js+vue+vue-router+vue-resource開發(fā)微信上傳圖片組件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
Vue3+Antd實現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕
這篇文章主要介紹了Vue3+Antd實現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
這篇文章主要介紹了使用vue cli4.x搭建vue項目的過程，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
element中使用formdata進(jìn)行上傳文件的方法
本文主要介紹了elementUI中使用formdata進(jìn)行上傳文件的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
Vue實現(xiàn)動態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法
下面小編就為大家分享一篇Vue實現(xiàn)動態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03