没有合适的资源?快使用搜索试试~ 我知道了~
使用 Element UI Table 的 slot-scope方法
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
5星 · 超过95%的资源 5 下载量 12 浏览量
2020-12-30
00:48:39
上传
评论
收藏 50KB PDF 举报
温馨提示
在 Element UI Table 的官网上,有一个“筛选”功能,里面可以利用 slot-scope,给表格记录打标签。 关键代码为: <template slot-scope=scope> <el type=scope.row.tag>{{scope.row.tag}}</el> </template> 这里首先利用 slot-scope 属性(Vue 2.6.0 已废弃)将子组件的数据(row.tag)传递给了父组件。 利用三元表达式为
资源推荐
资源详情
资源评论
使用使用 Element UI Table 的的 slot-scope方法方法
在 Element UI Table 的官网上,有一个“筛选”功能,里面可以利用 slot-scope,给表格记录打标签。
关键代码为:
<template slot-scope="scope">
<el-tag
:type="scope.row.tag === '家' ? 'primary' : 'success'"
disable-transitions>{{scope.row.tag}}</el-tag>
</template>
这里首先利用 slot-scope 属性(Vue 2.6.0 已废弃)将子组件的数据(row.tag)传递给了父组件。
利用三元表达式为 <el-tag> 标签设定样式。
实践过程中,发现这个三元表达式没法应用。因为实际业务场景,记录类型肯定不止两个啊!
这时,就该条件渲染指令出场了:
<el-tag v-if="scope.row.state === '已完成'" :type="'success'"
disable-transitions>{{scope.row.state}}
</el-tag>
<el-tag v-else-if="scope.row.state === '未开始'" :type="'danger'"
disable-transitions>{{scope.row.state}}
</el-tag>
<el-tag v-else-if="scope.row.state === '进行中'" :type="'warning'"
disable-transitions>{{scope.row.state}}
</el-tag>
运行结果:
weixin_38591011
- 粉丝: 4
- 资源: 919
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- Autosar学习视频10-19节
- stm32小车.zip
- AshampooUnInstaller v15.00.22 Portable一款强大的卸载工具,彻底、智能著称阿香婆强制卸载软件.rar
- Ashampoo WinOptimizer v27.00.05 阿香婆一款专业的垃圾清理、碎片整理启动项管理系统优化工具.rar
- misc设备驱动 正点原子阿尔法
- youleng-wms JAVA开发的WMS源码可以借签学习 数据库MYSQL
- 385大神asp.net三层设计停车场管理系统毕业课程源码设计+参考论文
- 数据集,训练数据集,深度学习
- 384大神asp.net基于三层汽车进销存销售管理系统毕业课程源码设计
- AutoSAR基础学习资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页