点击单元格自动聚焦可编辑，且失去焦点即修改成功的实现方法

//页面使用
   <InputNumber
      v-model="scope.row.subWeightage"
      :type="1"
      @change="(value) => changeTime(scope.$index)"
   />
//点击编辑日期框，失去焦点保存日期，InputNumber组件
<template>
  <div style="width: 100%; height: 100%">
    <div
      v-if="!isEdit"
      style="width: 100%; height: 100%"
      @click.stop="clickHandle"
    >
      <span>{{ value | formatValue }}</span>
    </div>
    <fks-date-picker
      v-else
      ref="inputRef"
      v-model="innerValue"
      type="date"
      placeholder="选择日期"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      style="width: 130px;"
      :clearable="false"
      @blur="handleChange"
    />
  </div>
</template>

<script>
export default {
  name: 'DateInput',
  filters: {
    formatValue(value){
      if(!value || value == 'null') return '/';
      return value;
    }
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: {
      type: [Number, String],
    },
  },
  data() {
    return {
      isEdit: false,
      innerValue: this.value,
    };
  },

  methods: {
    clickHandle() {
      this.isEdit = !this.isEdit;
      if (this.isEdit) {
        this.$nextTick(() => {
          this.$refs.inputRef.focus();
        });
      }
    },
    handleChange(e) {
      const value = e.value;
      this.clickHandle();
      this.$emit('change', value);
    },
  },
};
</script>

<style>
</style>


//页面使用
<DateInput
    v-model="scope.row.completionTime"
    @change="(value) => changeTime(scope.$index)"
 />
//点击编辑数字输入框，失去焦点保存
<template>
  <div style="width: 100%; height: 100%" class="rowContainer">
    <div
      class="rowContainer"
      v-if="!isEdit"
      style="width: 100%; height: 100%"
      @click.stop="clickHandle"
    >
      <span>{{ formatValue(value) }}</span>
    </div>
    <fks-input-number
      v-else
      ref="inputRef"
      v-model="innerValue"
      controls-position="right"
      :min="0"
      style="width: 100px; height: 100%"
      @blur="handleChange"
    />
  </div>
</template>

<script>
export default {
  name: 'InputNumber',
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: {
      type: [Number, String],
    },
    type: {
      type: [Number, String],
    },
  },
  data() {
    return {
      isEdit: false,
      innerValue: this.value,
    };
  },

  methods: {
    formatValue(value) {
      const unit = this.type == 1 ? '%' : '';
      if(!value || value == 'null') return 0 + unit;
      if(isNaN(Number(value))) return (0 + unit);
      return value + unit;
    },
    clickHandle() {
      this.isEdit = !this.isEdit;
      if (this.isEdit) {
        this.$nextTick(() => {
          this.$refs.inputRef.focus();
        });
      }
    },
    handleChange(e) {
      const value = Number(e.target.value);
      this.clickHandle();
      this.$emit('change', value);
    },
  },
};
</script>

<style scoped lang="scss">
.rowContainer{
  display: flex;
  align-items: center;
  justify-content: center;
}
::v-deep {
  .fks-input-number {
    display: flex;
    align-items: center;
    justify-content: center;
    .is-controls-right .fks-input__inner {
      padding-right: 0px;
      padding-left: 0px;
    }
    .fks-input-number__decrease {
      display: none;
    }
    .fks-input-number__increase {
      display: none;
    }
  }
  .fks-input-number--medium .fks-input__inner {
    padding-right: 0px;
    padding-left: 0px;
  }
}
</style>