vue—统一状态判断管理

在写一些后台项目的时候，我们经常会遇到用一些条件去判断按钮，或者文案的显示情况

<el-button v-if=“status === 1 && is_show=== 2“>提 交 审 核</el-button>

通常我们会这样判断 ，在按钮上加很多的v-if写上一长串的判断条件，既影响html的阅读 ，也不利于重复的判断条件复用，为了应对这样的需求推荐给大家一种统一状态管理的写法。

首先在项目模块中可以新增一个js文件：例如：Reward.js

Reward.js:

export default class Reward {

 isDel() {
    return this.state_name === '待执行'
  }


  isLookup() {
    return ['待执行', '已执行'].indexOf(this.state_name) > -1
  }


}

然后在使用的页面：

import Reward from "./Reward";

        <el-table-column
          label="操作"
          align="right"
          header-align="center"
          width="280"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              v-if="scope.row.isDel()"
              @click="handleConfirmOpera('del', scope.row)"
              >删除</el-button
            >
            <el-button
              type="text"
              size="small"
              v-if="scope.row.isDel()"
              @click="handleConfirmOpera('del', scope.row)"
              >查看</el-button
            >
        </template>
      </el-table-column>

这样html结构看起来简洁，重复的判断逻辑也可以复用啦～～～