理解vue中的slot-scope=“scope“

理解vue中的slot-scope=“scope”

slot是插槽，slot-scope="scope"相当于一行的数据

<el-table-column label="状态" prop="status">
<template slot-scope="scope">
<span>
{{scope.row.status == "0"?"状态0"：scope.row.status == "1"?"状态1"："状态2"}}
</span>
</template>
<el-table-column>

此外还有一些编辑删除等功能
scope.$index 就是该行的下标
scope.row 就是该行的数据所有消息对象

<el-table-column lable="操作">
<template slot-scope="scope">
<Button size="mini" lable="编辑" type="primary"
@click="edit(scope.$index,scope.row,'1')":disabled="scope.row.status =='2'||scope.row.status =='1'>
</Button>
<Button>~~~</Button>
<Button>~~~</Button>
</template>
</el-table-column>

理解vue中的slot-scope=“scope“相关推荐

深入理解vue中的slot与slot-scope （简单易懂）
走在前端的大道上插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示. 由于 ...
深入理解vue中的slot与slot-scope
写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项在使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生&qu ...
slot属性值_深入理解vue中的slot与slot
作者/云荒杯倾写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者 ...
怎样理解vue中的slot
插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. Slot 是在组件模板中设置的用于在父组件中 ...
理解vue中less的scoped和/deep/工作原理
理解vue中less的scoped和/deep/工作原理 scoped /deep/ 实战总结 scoped vue项目一般是单页面.多组件,整个项目共用一个css样式表,有时候我们在写组件的过程中 ...
[Vue][面试]你怎么理解vue中的diff算法？
你怎么理解vue中的diff算法? #####源码分析1:必要性,lifecycle.js–mountComponent() vue中一个组件一个watcher实例,而组件中可能存在很多个data中的 ...
前端面试 vue生命周期钩子是如何实现的？理解vue中模板编译原理？
生命周期钩子在内部会被vue维护成一个数组(vue 内部有一个方法mergeOption)和全局的生命周期合并最终转换成数组,当执行到具体流程时会执行钩子(发布订阅模式),callHook来实现调用. ...
如何理解vue中同步异步
如何理解vue中同步异步同步异步 , 举个例子来说,一家餐厅吧来了5个客人,同步的意思就是说,来第一个点菜,点了个鱼,好, 厨师去捉鱼杀鱼,过了半小时鱼好了给第一位客人,开始下位一位客人,就这样一 ...
理解vue中的scope的使用
我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取插槽上的属性值,获取到的值是一个 ...

理解vue中的slot-scope=“scope“

理解vue中的slot-scope=“scope“相关推荐

最新文章

热门文章