脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Element Table slot-scope

使用 Element UI Table 的 slot-scope方法

 更新时间：2019年10月10日 11:01:24   作者：deniro_li  
这篇文章主要介绍了使用 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>

运行结果：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue实现同时设置多个倒计时

    vue实现同时设置多个倒计时

    这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-05-05
  • TypeScript在vue中的使用解读

    TypeScript在vue中的使用解读

    这篇文章主要介绍了TypeScript在vue中的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-02-02
  • Vue传参一箩筐(页面、组件)

    Vue传参一箩筐(页面、组件)

    这篇文章主要介绍了Vue传参一箩筐(页面、组件)，Vue页面、组件之间传参方式繁多，此处罗列出常用的几种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • vue 动态创建组件的两种方法

    vue 动态创建组件的两种方法

    这篇文章主要介绍了vue 动态创建组件的两种方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
    2020-12-12
  • vuejs父子组件通信的问题

    vuejs父子组件通信的问题

    本篇文章主要介绍了vue父子组件通信 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • mini-vue渲染的简易实现

    mini-vue渲染的简易实现

    本文主要介绍了mini-vue渲染的简易实现，主要简单来实现一个虚拟dom渲染真实dom，以及更新的方法。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Vue中transition标签的基本使用教程

    Vue中transition标签的基本使用教程

    Vue提供了transition的封装组件,可以给任何元素和组件添加进入/离开过渡,下面这篇文章主要给大家介绍了关于Vue中transition标签基本使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • Vue 调试访问本地后端接口配置

    Vue 调试访问本地后端接口配置

    记录一下本地测试前端的时候怎么访问本地后端接口,文中给大家提到了vue如何做调试后台接口的配置和proxy的工作原理以及为什么能解决跨域，感兴趣的朋友跟随小编一起看看吧
    2023-06-06
  • vue操作动画的记录animate.css实例代码

    vue操作动画的记录animate.css实例代码

    这篇文章主要介绍了vue操作动画的记录animate.css的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-04-04
  • ElementUI中el-input无法输入、修改及删除问题解决办法

    ElementUI中el-input无法输入、修改及删除问题解决办法

    这篇文章主要给大家介绍了关于ElementUI中el-input无法输入、修改及删除问题的解决办法,这种问题产生是因为input在vue中的受控,我们需要去重新改变一下监听和实现,需要的朋友可以参考下
    2023-11-11

最新评论