如何为数据表格内的字段绑定computed property（计算属性）？

嘿，你之前给普通文本字段加货币掩码的实现完全没问题！那个computed属性的getter负责格式化显示、setter解析输入更新原始数据的思路，很靠谱～

不过在v-data-table里直接用全局computed属性的方式行不通，原因有两个：

• computed属性属于组件根作用域，根本访问不到模板插槽里的props.item局部变量
• 单个computed属性没法同时处理表格里的多行独立数据

下面给你两种可行的解决方案，按需选择：

方案1：拆分v-model快速实现（无需额外组件） #

直接把v-model拆成:value（显示格式化后的值）和@input（处理输入更新原始数据）：

模板代码 #

<v-data-table 
  :headers="headerLoanBalance" 
  :items="loan.loanBalances" 
  hide-actions 
  :total-items="disableSorting"
>
  <template slot="items" slot-scope="props">
    <tr>
      <td class="pl-0">
        <v-text-field 
          :prefix="currency" 
          :value="formatAsCurrency(props.item.value, 0)"
          @input="updateLoanBalance(props.item, $event)"
          :disabled="disabled"
        ></v-text-field>
      </td>
    </tr>
  </template>
</v-data-table>

逻辑代码 #

// 保留你已有的格式化方法
formatAsCurrency(value, decimalPlaces) {
  // 这里放你的货币格式化逻辑，比如返回带符号的字符串
}

// 新增处理输入的方法，针对每个表格项更新数据
updateLoanBalance(item, inputValue) {
  // 解析用户输入，只保留数字和小数点，转成数值
  item.value = Number(inputValue.replace(/[^0-9\.]/g, ''));
}

方案2：封装成可复用子组件（更优雅） #

如果这个货币输入字段在项目里多次用到，封装成子组件会更便于维护和复用：

子组件：CurrencyTextField.vue #

<template>
  <v-text-field
    :prefix="currency"
    v-model="formattedValue"
    :disabled="disabled"
    :label="label"
  ></v-text-field>
</template>

<script>
export default {
  props: {
    value: { // 接收父组件传入的原始数值
      type: Number,
      required: true
    },
    currency: {
      type: String,
      default: '$'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    },
    decimalPlaces: {
      type: Number,
      default: 0
    }
  },
  computed: {
    formattedValue: {
      get() {
        return this.formatAsCurrency(this.value, this.decimalPlaces);
      },
      set(newValue) {
        // 解析输入并把结果传给父组件
        const parsedValue = Number(newValue.replace(/[^0-9\.]/g, ''));
        this.$emit('input', parsedValue);
      }
    }
  },
  methods: {
    formatAsCurrency(value, decimalPlaces) {
      // 你的货币格式化逻辑
    }
  }
}
</script>

父组件中使用子组件 #

<template>
  <v-data-table 
    :headers="headerLoanBalance" 
    :items="loan.loanBalances" 
    hide-actions 
    :total-items="disableSorting"
  >
    <template slot="items" slot-scope="props">
      <tr>
        <td class="pl-0">
          <currency-text-field
            :currency="currency"
            v-model="props.item.value"
            :disabled="disabled"
            label="Loan Balance"
          ></currency-text-field>
        </td>
      </tr>
    </template>
  </v-data-table>
</template>

<script>
import CurrencyTextField from './CurrencyTextField.vue';

export default {
  components: {
    CurrencyTextField
  },
  // 其他组件逻辑...
}
</script>

内容的提问来源于stack exchange，提问作者Veer3383