element列表状态过滤

最新推荐文章于 2023-05-10 15:03:07 发布

妍崽崽@

最新推荐文章于 2023-05-10 15:03:07 发布

阅读量220

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_44727080/article/details/129945444

版权

文章展示了在Vue.js中如何使用过滤器(stateFilter和stateFilterColor)来处理协议状态，根据状态类型显示相应的名称和背景色。状态列表包括未生效、待生效、已生效、已过期、已作废和已归档等，每种状态关联了特定的颜色。

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

html

<template slot-scope="scope">
            <div class="condition">
              <span
                :style="scope.row.status | stateFilterColor"
                class="condition-yuan"
              />
              <span>{{ scope.row.status | stateFilter }}</span>
            </div>
          </template>

export default

 // 协议状态过滤
  filters: {
    stateFilter(val) {
      if (!val) {
        return '';
      }
      return statelist.filter ((item) => item.type === val)[0].name;
    },
    // 状态背景色过滤器
    stateFilterColor(val) {
      if (!val) {
        return '';
      }
      return statelist.filter ((item) => item.type === val)[0].color;
    },

  }

data

// 协议状态
const statelist = [
  { name: '未生效', type: 'INEFFECTIVE', color: 'background:#3491FA' },
  { name: '待生效', type: 'PENDING', color: 'background:#FF7D00;' },
  { name: '已生效', type: 'EFFECTIVE', color: 'background:#52C41A;' },
  { name: '已过期', type: 'EXPIRED', color: 'background:#C0C4CC;' },
  { name: '已作废', type: 'VOIDED', color: 'background:#F53F3F;' },
  { name: '已归档', type: 'ARCHIVED', color: 'background:#C0C4CC;' }
];