Question

我正在尝试使用bootstrap-vue构建输入字段，用户可以在其中输入任何所需的数字，并且应将其格式化为3位十进制数。

这是我到目前为止所获得的。 focusOut-Method会警告我想要的值，但是我不知道如何用它来更新表行中的值，因为它被值调用。你有什么主意吗？

<template>
  <div>
    <b-table :items="items" :fields="fields" >
      <template v-slot:cell(price)="row">
          <b-form-input 
            v-model="row.item.price"
            @blur="focusOut($event, row.item.price)"
          />
      </template>
    </b-table>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      fields: [...],
    };
  },
  computed: {
    items: function () {
      return [{price: 3.9}, {price: 5}, {price: 9.333}];
    },
  },
  methods: {
    focusOut: function (event, value) {
      if (["Arrow", "Backspace", "Shift"].includes(event.key)) {
        this.preventNextIteration = true;
        return;
      }
      if (this.preventNextIteration) {
        this.preventNextIteration = false;
        return;
      }

      value = parseFloat(value.replace(",", ".")).toLocaleString(undefined, {
        minimumFractionDigits: 3,
      });
      alert(value);
    },
  } ....
};
</script>

Answer 1

首先，items应该是一个简单的数据属性，而不是计算所得的属性（因为您没有进行任何计算），其次，请尝试获取行索引和单元格名称（在这种情况下为{{ 1}}），然后在方法内部更新给定行索引处的单元格：

price

   <template v-slot:cell(price)="row">
          <b-form-input 
            v-model="row.item.price"
            @blur="focusOut($event, row.item.price,'price',row.index)"
          />
      </template>

data: function () {
    return {
      fields: [...],
      items:  [{price: 3.9}, {price: 5}, {price: 9.333}]
    };
  },

LIVE DEMO

b-form-input如何在bootstrap-vue表单元中使用@blur修改/格式化输入？

1 个答案: