小程序性能改进方案_使用 Element UI Table 的 slot

发布时间:2021-01-07 10:41 作者:jianzhan

摘要: 应用 Element UI Table 的 slot-scope方式 本文关键详细介绍了应用 Element UI Table 的 slot-scope方式,原文中根据实例编码详细介绍的十分详尽,对大伙儿的学习培训或是工作中具备一定的参

使用 Element UI Table 的 slot-scope方法       这篇文章主要介绍了使用 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 

运行结果:

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

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

  • 给新手建站的建议和注意

    很多新手要想建设网站但对这一生产制造制造行业和流程都不就行了解,仅有听技术性性工作中工作人员说些甚么好就是什么好,以下便是我例举建设网站的大约流程和注意事项,仅作

  • 自助建站已经逐渐取代了

    伴随着互连网的持续发展趋势与在线客户的增加,互连网营销推广方式已是为中小型公司和本人工作中室不可或缺的营销推广方式。网站建设也已是为公司进行互连网营销推广的最好挑

  • 互联网上的孕程、医羽、

    难道说无需种活自己的工作中工作人员了没有把握过在这其中的俩家。服务理念统统是假的,立即点都是赚钱。我国过去的海外试管,都是中介公司企业方法,因为信息内容內容不透明

  • 蓝创云自助建站系统平台

    随着着互连网阶段的很快发展趋势发展趋势,大伙儿渐渐地进入赶到互联网+当然自然环境里,我国我国各种各样计算机出色优秀人才,对网站及手机上手机软件等有兴趣爱好喜好工作中

  • 定制网站建设的流程和好

    网站的建设早就越来越越越普遍的了,便于更强的给大家提供网站的建设,有很多模版类型的网立在可以供大伙儿选择。但是,还是有很多的人要选择定制网站的建设,显而易见的,定