vue+element-ui 如何根据获取的prop的值显示不同的字体颜色

最新推荐文章于 2023-04-25 10:53:28 发布
最新推荐文章于 2023-04-25 10:53:28 发布
阅读量2.2k 收藏 7
点赞数
分类专栏： js基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26715417/article/details/102472676
版权
本文介绍如何在Vue项目中结合Element-UI，根据获取的prop属性值动态改变订单状态显示的字体颜色。通过预先封装状态码，组件可以智能地根据订单状态ID呈现不同颜色。
摘要由CSDN通过智能技术生成

需求，我想根据获取的订单状态id来显示不同颜色的订单状态

直接上代码

<el-table-column prop="orderStatusId" label="订单状态" align="center" width="120">
        <template slot-scope="scope">
          <span v-html="formateStatus( scope.row.orderStatusId )"></span>
        </template>
      </el-table-column>

// 设置状态颜色
    formateStatus (cellValue) {
   
      let statusName = ''
最低0.47元/天 解锁文章
简单929
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE,数字状态转换为中文、根据不同状态显示不同颜色、element icon的自定义颜色
lmougang的博客
06-15 3727
VUE,数字状态转换为中文、根据不同状态显示不同颜色、element icon的自定义颜色在页面根据数字显示中文状态、根据不同状态显示不同颜色element 的icon是否可以改变颜色、大小？ 在页面根据数字显示中文状态、根据不同状态显示不同颜色 背景： 用VUE进行测试工具的前端页面开发。 在测试工具开发中，测用例有不同的测试结果，需要在页面提现出来 需求： 1、根据后台返回的数字状态，转换为中文。比如用例的状态字段，后台返回的状态是0、1、2、3，要转换成：用例执行状态0未执行,1.执行中;2.执行完成
vue 根据不同的状态显示不同的颜色
m0_56272227的博客
11-14 4364
根据不同状态显示不同颜色
vue element tree组件，根据不同的状态显示不同的字体颜色
qq_41437844的博客
08-25 3499
HTML <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :render-content="renderContent" :highlight-current="true" ></el-tree> data 把带status为1的颜色变为红色，其余的变为绿色 data: [ {
vue地图按区域数据不同显示相应的颜色
coldriversnow的专栏
06-16 1082
<template> <div style="height:100%;width:100%"> <div id="chart_example"></div> <div class="mapTips"> <div class="orgMsg" v-for="(items,index) in orgMsg" :key="index">{{items.name}}:<span class="...
element-ui 表格的行数的某个值按照接口传的不同值显示不同的颜色
肖肖肖丽珠的博客
11-02 4258
 &lt;el-table :data="affairtypes" highlight-current-row v-loading="listLoading" @selection-change="selsChange"  @sort-change="sortChange" style="width: 100%;"&gt; &lt;el-table-column prop=&quot
vue elementUI 使用slot-scope标红
凉酱的博客
05-19 871
加一行注释 <!-- eslint-disable-next-line --> <template slot-scope="scope">
vue+element-ui表格封装tag标签使用插槽
10-15
在Web开发中，尤其是使用Vue.js框架结合Element-UI组件库时，我们经常会遇到需要在表格中展示信息并使用特定标签（tag）来标注这些信息的场景。Vue+Element-UI表格封装tag标签使用插槽便是介绍如何在表格中动态插入...
vue+element-ui实现表格编辑的三种实现方式
10-17
本文介绍了使用vue与element-ui实现表格编辑的三种不同方式，具体包括表格内部显示和编辑切换、通过弹出另外的表格进行编辑，以及直接通过样式控制实现编辑功能。以下分别对这三种实现方式进行详细的阐述。 ### ...
vue+element-ui动态生成多级表头的方法
10-18
标题中的“vue+element-ui动态生成多级表头的方法”是指在Vue.js应用程序中使用Element-UI库来创建一个能够根据数据动态展示多级表头的表格组件。Element-UI是一个流行的前端UI框架，它提供了丰富的组件库，适用于...
vite+vue3+element-plus改变表格单元格颜色
m0_50621863的博客
11-26 991
这里注意，用vite启动后会提示：Network: use --host to expose，且无法通过网络IP访问服务。当 局域网 中另一台设备需要访问该服务时，必须通过本机 IP + 端口 访问。尝试访问后，发现找不到这个服务。原因是： 没有将服务暴露在网络中。
不同状态不同颜色
waterlin2011的博客
08-21 320
<el-table-column prop="dfZt" label="标题标题" width="120px"> <template slot-scope="scope"> <span :class="Zt(scope.row.dfZt)">{{scope.row.dfZt}}</span> </template> </el-table-column> //状态 Zt(valu...
element-table动态生成表格，动态设置字体颜色
qq_39377906的博客
10-27 949
element-table动态生成表格，动态设置字体颜色，vue3+ts+element-plus
elementUI table表格el-table-column修改字体颜色
m0_54850952的博客
03-08 3352
例子! <el-table-column prop="isOverText" label="结清状态" align="center" :show-overflow-tooltip="true" color:red / > //这个样子加颜色是没有用的! 正确的例子! <el-table-column prop="isOverText" label="结清
element-UI 根据table中数据改变颜色。
qq_43504861的博客
08-26 5795
1.element-UI 根据table中数据改变颜色。下拉框中显示名称与绑定id的相关问题 element-UI 根据table中数据改变颜色 问题描述：在element-UI 的table中绑定了数据源，然后让数据根据不同的意义进行显示不同的颜色，比如收入与支出，分别为红色与绿色，便于用户区别。 效果如下： 实现思路： 设置这一列的一个元素颜色均为红色并绑定数据，然后使用v-if与v-else，判断显示另一个元素，另一个元素也绑定的该数据源，颜色为绿色。 实现代码： <el-table-col
elementUI表格根据状态显示不同的字体颜色
eternal_tc的博客
02-07 2632
elementUI表格根据状态显示不同的字体颜色
VUE 动态修改颜色值
最新发布
scimence的专栏
04-25 1015
在computed函数块中添加自定义函数，当内部变量deFenLv变动时，自动变动颜色值
element-UI 根据table中数据改变颜色 或显示对应内容
热门推荐
每文的博客
12-06 2万+
element-UI 根据table中数据改变单元格数据颜色或显示对应的内容的实现如下： 1.根据table中数据不同改变颜色（正数颜色为红色，负数颜色为绿色） 实现代码： &lt;el-table-column prop="sharesReturn" label="盈亏(元)"&gt; &lt;template scope="scope"&gt; ...
vue+element-ui 如何根据获取的prop的值显示不同的标签
渡目成书
11-14 2万+
当我们获取后台的数据，后台返回的数据为0和1，我们想要的效果是，后台返回1显示√，后台返回0显示X,如何根据prop的值来判断 ，在element-UI中怎么判断，将prop去掉在下面加上&lt;template slot-scope="scope"&gt;&lt;/template&gt;里面再写vue的判断 &lt;el-table-column label="是否显示" &gt; &lt;...
Vue+Element-UI封装table使用：解决表头render函数问题
"这篇文档主要介绍了如何在Vue项目中结合Element-UI库使用表格（table）功能，并且解决Element-UI不支持直接在表头内写render函数的问题。作者通过二次封装element-ui的table组件来实现自定义渲染功能。文档包括了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值