使用 Element UI Table 的 slot-scope方法


Posted in Javascript onOctober 10, 2019

在 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>
  1. 这里首先利用 slot-scope 属性(Vue 2.6.0 已废弃)将子组件的数据(row.tag)传递给了父组件。
  2. 利用三元表达式为 <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>

运行结果:

使用 Element UI Table 的 slot-scope方法

官网只是基本用法,真正实践还是要靠积累与总结哦O(∩_∩)O哈哈~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 浮点数运算 精度问题
Oct 06 Javascript
JQuery的Alert消息框插件使用介绍
Oct 09 Javascript
Jquery Ajax请求代码(2)
Jan 07 Javascript
按钮JS复制文本框和表格的代码
Apr 01 Javascript
js不完美解决click和dblclick事件冲突问题
Jul 16 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
vue项目中mock.js的使用及基本用法
May 22 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 #Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 #Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 #Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 #Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 #Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 #Javascript
Vue3.0数据响应式原理详解
Oct 09 #Javascript
You might like
php二维数组用键名分组相加实例函数
2013/11/06 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
Python图算法实例分析
2016/08/13 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
Python文件读写常见用法总结
2019/02/22 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
见习期自我鉴定
2013/11/07 职场文书
学校课外活动总结
2014/05/08 职场文书
爱护草坪标语
2014/06/24 职场文书
2014教师研修学习体会
2014/07/08 职场文书
司机岗位职责说明书
2014/07/29 职场文书
银行给客户的感谢信
2015/01/23 职场文书
小学教师工作总结2015
2015/04/07 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
Golang并发工具Singleflight
2022/05/06 Golang