MyCellEditer.vue

<!--
 * 单元格编辑器
 * https://www.ag-grid.com/vue-data-grid/component-cell-editor/
-->
<script lang="ts">
import { ref, onMounted, defineComponent, nextTick } from 'vue';
export default defineComponent({
  setup(props: any) {
    const cellInputRef = ref<any>(null);
    const inputValue = ref<any>(null);

    onMounted(() => {
      // 编辑开始后
      // 获取输入框焦点
      nextTick(() => {
        inputValue.value = props.params.value;
        cellInputRef.value.focus();
      });
    });

    // 编辑完成后发送到网格的最终值
    const getValue = () => {
      return inputValue.value;
    };

    // 在编辑开始前被调用一次，
    // 以便在编辑开始前给编辑一个取消编辑的机会。
    const isCancelBeforeStart = () => {
      return false;
    };

    // 编辑完成时调用一次（例如，如果按下 Enter）。
    // 如果返回 true，则编辑的结果将被忽略。
    const isCancelAfterEnd = () => {
      return false;
    };

    return {
      cellInputRef,
      inputValue,
      getValue,
      isCancelBeforeStart,
      isCancelAfterEnd,
    };
  },
});
</script>
<template>
  <div>
    <div>
      <q-input dense square filled v-model="inputValue" ref="cellInputRef" />
    </div>
  </div>
</template>

<style lang="scss" scoped></style>