码迷,mamicode.com
首页 > 其他好文 > 详细

Element UI 中scope用法

时间:2020-06-24 00:21:10      阅读:342      评论:0      收藏:0      [点我收藏+]

标签:cli   包含   uid   试验   observer   slot   log   click   pre   

一个固定用法: <template slot-scope="scope">

我们主要说一下这个scope是个什么东西,scope就相当于是tableData的一行,与el-table-column唯一对应,具体试验代码如下,

     <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="update(scope)" type="text" size="small">编辑</el-button>
          <el-button type="text" size="small" @click="del(scope.$index)">删除</el-button>
        </template>
      </el-table-column>

js方法 console.log(scope)  通过在控制台观察,发现每一行输出的scope都是当前行的数据,包含$index:当前行的索引,column,row,store等,如下:

{row: {…}, column: {…}, $index: 0, store: TableStore, _self: VueComponent}
$index: 0
column: {…}
row: {…}
store: TableStore {__ob__: Observer}
_self: VueComponent {_uid: 486, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
__proto__: Object

 

Element UI 中scope用法

标签:cli   包含   uid   试验   observer   slot   log   click   pre   

原文地址:https://www.cnblogs.com/baicai37/p/13185301.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!