vue class computed 动态控制样式

35 阅读1分钟

在这里插入图片描述

<template slot="rateStatus" slot-scope="{ scope }">
    <el-link
      type="primary"
      :class="textColor(scope.row.rateStatus)"
      :disabled="true"
      :underline="false"
    >{{ scope.row.rateStatusdictFormat(rateStatusDs) | withEmptyTxt()}}</el-link>
</template>
computed: {
  textColor() {
    return (val) => {
      if (val == '1') {
        return 'blue--text'
      } else if (val == '2') {
        return 'green--text'
      } else if (val == '3') {
        return 'red--text'
      } else {
        return ''
      }
    }
  }
}

注意:uniapp 开发的微信小程序无法使用此方式,可在method中代替。