element-ui el-select下拉列表选项进行颜色设置

最新推荐文章于 2024-07-30 17:50:06 发布

m0_66899315

最新推荐文章于 2024-07-30 17:50:06 发布

阅读量3.2k

点赞数 1

分类专栏：表单技巧文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/m0_66899315/article/details/125223604

版权

表单技巧专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该博客介绍了如何在Element UI的el-select组件中利用v-html指令结合自定义函数getUrgencyColor来动态设置选项的颜色，从而实现紧急程度分类的视觉区分。通过这种方式，可以为每个紧急程度赋予不同的颜色，如黄色(#808000)、橙色和红色，提高用户界面的可读性和交互性。

摘要由CSDN通过智能技术生成

实现上述效果，关键在于：el-ption里面加入v-html修饰符，进行样式添加

如下：

  <el-form-item prop="urgencyGrade">
          <el-select
            v-model="searchParams.urgencyGrade"
            clearable
            filterable
            style="width: 140px"
            placeholder="紧急程度"
          >
            <el-option
              v-for="item in dictFindList.maintainOrderUrgentCodeList"
              v-bind:key="item.dictValue"
              :label="item.dictName"
              :value="item.dictValue"
              v-html="
                `<span style='color:${getUrgencyColor(item.dictValue)}'>${
                  item.dictName
            }</span>`"
            ></el-option>
          </el-select>
        </el-form-item>

  // 获取紧急程度颜色
    getUrgencyColor(code) {
      if (code == 3) {
        return "#808000";
      } else if (code == 2) {
        return "orange";
      } else if (code == 1) {
        return "red";
      }
      return "#39b54a";
    },