使用 Element UI Table 的 slot-scope方法
2020-03-12 07:10
1876 查看
在 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>
运行结果:
官网只是基本用法,真正实践还是要靠积累与总结哦O(∩_∩)O哈哈~
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
- element-ui 中的table的列隐藏问题解决
- Element-UI Table组件上添加列拖拽效果实现方法
- vue element-ui table表格滚动加载方法
- VUE element-ui 写个复用Table组件的示例代码
- vue elementUI table表格数据 滚动懒加载的实现方法
- VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
- Element-ui table中过滤条件变更表格内容的方法
- element ui table(表格)实现点击一行展开功能
- 优雅的elementUI table单元格可编辑实现方法详解
- 详解使用element-ui table组件的筛选功能的一个小坑
相关文章推荐
- vue template中slot-scope/scope的使用方法
- vue2.0 + element UI 中 el-table 数据导出Excel的方法
- vue2.0 使用element-ui里的upload组件实现图片预览效果方法
- element ui table 增加筛选的方法示例
- Vue中插槽-----特殊特性slot、slot-scope与指令v-slot的使用方法
- Element-ui之ElScrollBar组件滚动条的使用方法
- 关于使用wetouch的ui-table标签不能通过 设置start-refresh为true实现table的立即刷新的一种解决方法
- 使用element-ui 组件动态合并table的行/列(修改)
- VueJS ElementUI el-table 的 formatter 和 scope template 不能同时存在
- ElementUI之cell-class-name 使用方法
- Element UI 中可展开表格手风琴效果实现(toggleRowExpansion方法的正确使用方式)
- 监听element-ui table滚动事件的方法
- VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
- vuejs+element UI table表格中实现禁用部分复选框的方法
- element-ui表格使用前台排序,当table部分数据为空null时,解决排序不起作用、排序错乱和排序不整齐的问题
- 使用Element-ui的Table时表格不能显示问题
- vue使用element-ui的el-input监听不了回车事件的解决方法
- elementui table组件的使用
- VueJS ElementUI el-table 的 formatter 和 scope template 不能同时存在
- vue+element ui 使用$refs获取el-dialog 下的 el-table 组件 ,以及使用table多选,默认选中