按钮或标签如何通过不同的内容显示不同的颜色以及按钮的禁用

 

 一、不同状态不同颜色

<el-tag size="middle"
        :type="btnColor(scope.row.task_status)">
   {{scope.row.task_status|keyvalFilter('key',[{key: "0",val: "已完成"}, {key: "1",val: "未完成"},{key: "2",val: "已接收"},{key: "3",val: "待接收"},{key: "4",val: "已同意"},{key: "5",val: "待审批"},{key: "6",val: "未同意"},{key: "7",val: "已发送"},{key: "8",val: "待发送"},v],'val')}}
            </el-tag>
//由于状态由后端定义所以需要在前台代码加过滤器，以下是相关代码
  {{scope.row.task_status|keyvalFilter('key',[{key: "0",val: "已完成"}, {key: "1",val: "未完成"},{key: "2",val: "已接收"},{key: "3",val: "待接收"},{key: "4",val: "已同意"},{key: "5",val: "待审批"},{key: "6",val: "未同意"},{key: "7",val: "已发送"},{key: "8",val: "待发送"},v],'val')}}

btnColor (task_status) {
      console.log(task_status)
      if (task_status === '4') {
        return 'success'
      } if (task_status === '5') {
        return 'danger'
      }
      else if (task_status === '6') {
        return 'info'
      }
    },

二、禁用