對於常規的計算屬性，都是直接返回單個值，如：

 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，也就是方法。