使用 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 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
JavaScript入门教程之引用类型
May 04 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
PHP4.04简明安装
2006/10/09 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
Python变量访问权限控制详解
2019/06/29 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
keras打印loss对权重的导数方式
2020/06/10 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
临床医师专业个人自我评价
2014/01/08 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
户外活动总结范文
2014/04/30 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
初一语文教学反思
2016/03/03 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript