实现tab标签的切换以及表格中数据根据值不同而表现的样式不同

实现tab标签的切换以及表格中数据根据值不同而表现的样式不同

1、实现tab标签的切换

效果：点击所有任务，切换到所有任务表格，点击待进行任务，切换到待进行任务表格。。。

实现：tab标签上均设置上点击事件 changeNum(1)，对应内容用v-show="num===1"来显示和隐藏

在data属性中设置默认初始num=1,

方法中写changeNum方法：

        // 切换显示不同的任务列表
        changeNum(index){
            this.num = index;            
        },

2、表格中数据根据值不同而表现的样式不同

效果：若是表格中的某一列的数据样式一样，只是与其他列表的样式不一样，可以用如下方法，此时设置该列的颜色为天蓝色

        changeCellStyle(row){
            // console.log(row,column,rowIndex,columnIndex);
            if(row.column.label === "项目进程"){    //该列的标签名         
                return 'text-align:center;color: #2FB9D4'  
            }else{		//	其他列设置水平居中
                return 'text-align:center;'  
            }
        },

效果：若是表格中的某一列的样式根据值不同而发生改变，则需要分情况设置，方法如下，此时只是改变字体颜色

        changeCellStyle({row,column}){
            let cellStyle;
            switch (row.projectstatus) {
                case '待进行':
                    cellStyle="text-align:center;color: #3A9E55";
                    break;
                case '进行中':
                    cellStyle="text-align:center;color: #F2931F"
                    break;
                case '待评分':
                    cellStyle="text-align:center;color: #F21F1F"
                    break;
                case '已评分':
                    cellStyle="text-align:center;color: #000000"
                    break;            
                default:
                    cellStyle='text-align:center;'
            }
            if (column.label == '项目进程'){
                return cellStyle;
            }else{
                return 'text-align:center;'
            }
        },

若是不仅改变字体颜色，还改变背景颜色，则需要样式需要调整一下 cellStyle

  	 changeCellStyle({row,column}){
          let cellStyle;
          switch (row.settlementstatus) {
            case '已结':
              cellStyle="text-align:center;width: 60px;height: 30px;background: #23B7E5;border-radius: 4px;font-size: 18px;color: #FFFFFF;  display: flex;justify-content: center; align-items: center;margin:0 auto;margin-top: 35px;";
              break;
            case '未结':
              cellStyle="text-align:center;width: 60px;height: 30px;background: #FF3030;border-radius: 4px;font-size: 18px;color: #FFFFFF;  display: flex;justify-content: center; align-items: center;margin:0 auto;margin-top: 35px;"
              break;
            default:
              cellStyle='text-align:center;'
          }
          if (column.label == '结算状态'){
            return cellStyle;
          }else{
            return 'text-align:center;'
          }
        },