Vue的computed属性中方法带参数的写法记录

computed是计算属性，如果带参数怎么办？ 可以按照如下写法

Vue.component("mulit-table-operation", {
  mixins: [mixin],
  template: `<span>
        <el-tooltip v-for="(item,index) in field"
                    :content="getItemName(item)"
                    :key="index"
                    placement="top">
            <el-button type=""
                        :class="getItemClass(item)"
                        size="mini"
                        circle
                        @click.stop.prevent="operation(item)">
            </el-button>
        </el-tooltip>
        </span>`,
  computed: {
    getItemName() {
      return function(item) {
        let r_name = item.b_name[0];
        if (item) {
          const p_name = item.p_name;
          const p_value = item.p_value;
          if (this.rowData && p_value) {
            let _this = this;
            p_value.forEach(function(a, index) {
              if (_this.rowData[p_name] == a) {
                r_name = item.b_name[index];
                return;
              }
            });
          }
        }
        return r_name;
      };
    },
    getItemClass() {
      return function(item) {
        let r_name = item.classname;
        if (item.classname instanceof Array) {
          r_name = item.classname[0];
          if (item) {
            const p_name = item.p_name;
            const p_value = item.p_value;
            if (this.rowData && p_value) {
              let _this = this;
              p_value.forEach(function(a, index) {
                if (_this.rowData[p_name] == a) {
                  r_name = item.classname[index];
                  return;
                }
              });
            }
          }
        }
        //特殊的业务处理，不影响其他组件的正常使用
        if (
          item.show_juje &&
          this.rowData.p_uid &&
          this.rowData.p_uid != ctool.getUserId()
        ) {
          r_name = "hideButton";
        }
        return r_name;
      };
    }
  }
});

其中getItemClass和getItemName就是带了入参，在computed中定义方法时，通过内部return一个function的方式可是满足需要。

参考：vue中computed计算属性传入参数

• 点赞
• 收藏
• 分享
• • 文章举报

凉茶冰 发布了79 篇原创文章 · 获赞 31 · 访问量 11万+ 私信 关注

标签：Vue,return,computed,value,item,rowData,写法,name
来源： https://blog.csdn.net/liangcha007/article/details/104544692