请问vue-html部分, v-bind怎么同时写三元+函数？

Z时代
2024-03-06
分类：IT

template

    :icon="
        item.oprDesc == 'create'
          ? 'el-icon-time'
          : item.oprDesc == 'pass'
          ? 'el-icon-success'
          : item.oprDesc == 'revert'
          ? 'el-icon-error'
          : item.oprDesc == 'cancel'
          ? 'el-icon-remove'
          : 'el-icon-error _close' && setIcon(i)
      "

函数：

setIcon(i) {
  debugger
}

想要这样该怎么写呀？这样写debugger进不来

回答：

:icon="

    (item.oprDesc == 'create'
      ? 'el-icon-time'
      : item.oprDesc == 'pass'
      ? 'el-icon-success'
      : item.oprDesc == 'revert'
      ? 'el-icon-error'
      : item.oprDesc == 'cancel'
      ? 'el-icon-remove'
      : 'el-icon-error _close') && setIcon(i)  "

回答：

不妨试试看这样

:icon="item.oprDesc | handelIcon"
filters: {
    handelIcon(type) {
      switch (type) {
        case "create":
          return "el-icon-time";
        case "pass":
          return "el-icon-success";
        case "revert":
          return "el-icon-error";
        case "cancel":
          return "el-icon-remove";
        default: 
          return "el-icon-error _close";
      }    },