element-UI 根据table中数据改变颜色。

最新推荐文章于 2025-05-26 10:42:52 发布

随指尖而舞

最新推荐文章于 2025-05-26 10:42:52 发布

阅读量5.9k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_43504861/article/details/108247891

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Element-UI的表格中根据数据动态改变颜色，以区分收入和支出，同时解决编辑模式下，下拉框显示名称与绑定ID的问题，确保数据准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.element-UI 根据table中数据改变颜色。下拉框中显示名称与绑定id的相关问题

element-UI 根据table中数据改变颜色
问题描述：在element-UI 的table中绑定了数据源，然后让数据根据不同的意义进行显示不同的颜色，比如收入与支出，分别为红色与绿色，便于用户区别。
效果如下：
在这里插入图片描述
实现思路：
设置这一列的一个元素颜色均为红色并绑定数据，然后使用v-if与v-else，判断显示另一个元素，另一个元素也绑定的该数据源，颜色为绿色。
实现代码：

 <el-table-column prop="t_cost" label="收入/支出" >
        <template scope="scope">
                  <span v-if="scope.row.t_transactionType==0" style="color:#4CC108">{{ scope.row.t_cost }}</span>
                  <span v-else style="color: #F7220B">{{ scope.row.t_cost }}</span>
        </template>
</el-table-column>

参考链接

2.下拉框中显示名称与绑定id的相关问题

问题描述：
在这里插入图片描述

在进行table中一行数据的编辑时，点开编辑，根据row.id向数据库查询该条数据所有信息，并显示在一个from中，但是该表中只有站点id，需要根据id向关联表中查询sitename(站点名称)放到from中的下拉框selecesitename显示，
此时

this.selectSitename=row.sitename;

用户选择站点名称下拉框时

 <el-select v-model="selectSitename" filterable>
            <el-option
              v-for="item in Allsite"
              :key="item.id"
              :label="item.t_name"
              :value="item.id"
            ></el-option>
 </el-select>

此时,可以将值id直接赋给selecesitename

this.selectSitename=id;

可以直接修改数据库，

//调用修改接口，修改数据库
 UpdatesiteEquipment(this.updateData);

但是用户如果没有改变站点下拉框，此时下拉框中的值selecesitename就等于sitename，
由于selecesitename必须是站点id,就会发生冲突，需
要进行判断，在修改数据库。

解决方案：

//判断用户是否选择了新的站点
 if(this.Sitename==this.selectSitename)
  { }
  else{
      this.theSiteId=this.selectSitename;
     }
     this.updateData.t_siteId=this.theSiteId;
      //调用修改接口，修改数据库
      UpdatesiteEquipment(this.updateData)