1.19 业务需求

一时失言乱红尘 2021-08-13 13:05 305阅读 0赞

说来叶简单，就是把文字变成相应的颜色  
先来看代码

##### 数据部分 #####

// 显示院校状态逻辑
      showSchoolStatus(value) {
        const status = {
          0: '待学生确认',
          10: '处理中',
          15: '已提交',
          20: '已驳回',
          25: '学生驳回',
          30: '已确认',
          [-10]: '已弃用',
        };
    
        return status[value] || '';
      }

##### 逻辑部分 #####

<td>{
       { vm.showSchoolStatus(item.status) }}</td>

需求是把 `已驳回` 和 `学生驳回`变成红色  
`已确认` 变成绿色

##### 实现过程 #####

将原数据添加color属性

// 显示院校状态逻辑
      showSchoolStatus(value) {
        const status = {
          0: {
           txt:'待学生确认'
          },
          10: {
           txt: '处理中'
          },
          15: {
            txt: '已提交'
          },
          20: {
            txt:'已驳回',
            color:'red'
          },
          25: {
            txt:'学生驳回',
            color:'red'
          },
          30: {
            txt: '已确认',
            color: 'green'
          },
          [-10]: {
            txt: '已弃用'
          },
        };
        return status[value] || '';
      }

### 逻辑部分 ###

<td style="color: {
       {vm.showSchoolStatus(item.status).color}} ">{
       { vm.showSchoolStatus(item.status).txt}}</td>

总结：

1.  属性：值形势的数据，要想添加属性： 值 采用`对象`的形势
2.  原来的返回数据的写法不变，应为之前返回的单个的数据，现在返回的是一个对象，都是返回单个
3.  获取数据的时候，这里我有点眼界小，只是在item.status里面获取数据，首先，你都不知道item.status是什么数据，就txt? 应该现将item.status打印出来，发现是对象的名，那取值的话，肯定是在对象外面取值，再说了 … 少见
4.  样式的修改 最常见的就是style=“color:red”  
    5.那现在就是style = “ color: \{ \{vm.showSchoolStatus(item.status).color\}\}”  
    ![在这里插入图片描述][20200119181128600.png]

[20200119181128600.png]: /images/20210813/b176e38095a3468f8efa8cc811e0856f.png