Vue中计算属性是方法

对于常规的计算属性，都是直接返回单个值，如：

 computed: {
    result() {
        return this.one + this.two
   }
}

其实也可以返回一个方法。且看下面的代码：

<template>
  <el-table :data="data" border fit highlight-current-row style="width: 100%;">
    <el-table-column label="评价项">
      <template slot-scope="scope">
        <el-input v-model="scope.row.name" :autosize="{ minRows: 3, maxRows: 3}" readonly size="small" type="textarea"
          placeholder="请输入" />
      </template>
    </el-table-column>
    <el-table-column label="选择得分项" align="center">
      <template slot-scope="scope">
        <el-select v-model="scope.row.choiceScore" placeholder="请选择" size="small" style="width: 90%"
          @change="setScoreMinAndMax($event, scope.row)">
          <el-option v-for="item in scope.row.gradeList" :key="item.id" :label="item.scoreStr" :value="item.id" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="得分">
      <template slot-scope="scope">
        <el-input-number v-model="scope.row.score" :max="getMaxVal(scope.row)" :min="getMinVal(scope.row)"
          :precision="2" clearable size="small" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script>

  export default {
    data() {
      return {
        data: [
          {
            id: 101,
            name: '物流服务',
            choiceScore: '',
            score: 0,
            gradeList: [{
              id: 1,
              scoreStr: '0-3分，不满意',
              minVal: 0,
              maxVal: 3
            }, {
              id: 2,
              scoreStr: '4-6分，比较满意',
              minVal: 4,
              maxVal: 6
            }, {
              id: 3,
              scoreStr: '7-9分，非常满意',
              minVal: 7,
              maxVal: 9
            }, {
              id: 4,
              scoreStr: '10-10分，超级满意',
              minVal: 10,
              maxVal: 10
            }]
          },
          {
            id: 102,
            name: '商家服务',
            choiceScore: '',
            score: 0,
            gradeList: [{
              id: 20,
              scoreStr: '0-3分，不满意',
              minVal: 0,
              maxVal: 3
            }, {
              id: 21,
              scoreStr: '4-6分，比较满意',
              minVal: 4,
              maxVal: 6
            }, {
              id: 22,
              scoreStr: '7-10分，非常满意',
              minVal: 7,
              maxVal: 10
            }]
          },
          {
            id: 103,
            name: '商品描述',
            choiceScore: '',
            score: 0,
            gradeList: [{
              id: 66,
              scoreStr: '0-1分，描述不符合',
              minVal: 0,
              maxVal: 1
            }, {
              id: 67,
              scoreStr: '1-2分，基本符合',
              minVal: 1,
              maxVal: 2
            }, {
              id: 68,
              scoreStr: '3-5分，非常符合',
              minVal: 3,
              maxVal: 5
            }]
          }
        ],

      }
    },
    computed: {
      //获取最大值
      getMaxVal(row) {
        return function (row) {
          let val = Infinity //Infinity表示无限大
          if (row.gradeList) {
            if (row.maxVal) {
              val = row.maxVal
            } else {
              if (row.score && row.choiceScore) {
                for (var item of row.gradeList) {
                  if (item.minVal >= row.score && item.maxVal <= row.score) {
                    val = item.maxVal
                    break
                  }
                }
              } else {
                val = row.gradeList[0].maxVal
              }
            }
          }
          return val
        }
      },
      //获取最小值
      getMinVal(row) {
        return function (row) {
          let val = 0
          if (row.gradeList) {
            if (row.minVal) {
              val = row.minVal
            } else {
              if (row.score && row.choiceScore) {
                for (var item of row.gradeList) {
                  if (item.minVal >= row.score && item.maxVal <= row.score) {
                    val = item.minVal
                    break
                  }
                }
              } else {
                val = row.gradeList[0].minVal
              }
            }
          }
          return val
        }
      }
    },
    methods: {
      isBlankStr(str) {
        if (str === undefined || str == null) {
          return true
        } else {
          return false
        }
      },
      setScoreMinAndMax(v, row) {
        (row.gradeList).forEach(item => {
          if (v === item.id) {
            row.minVal = this.isBlankStr(item.minVal) ? 0 : item.minVal
            row.maxVal = this.isBlankStr(item.maxVal) ? Infinity : item.maxVal
            row.score = row.maxVal
          }
        })
      },
    },

  }

</script>

<style scoped>
</style>

效果图如下：

业务说明：需要对不同的评价项选择不同的得分项，同时而在得分栏自动变成对应得分项的最大值。分数可以调整，但只能在得分项的范围内修改。

技术分析：对于得分这一栏，需要动态的根据得分项来获取最大值和最小值，不能使用简单的单个计算属性，需要使用方法计算最终值并返回。

因此在代码中，第一处红色的地方使用计算属性，第二处代码用来计算最值，其返回值是一个function，也就是方法。