vxe-table 可编辑表格内值为空时 默认展示输入框 附完整代码

好的，以下是一个简单的例子，展示如何使用 `edit-render` 属性来自定义渲染器，实现在空值情况下展示输入框：

<template>
  <div>
    <vxe-table
      ref="xTable"
      :data="tableData"
      :edit-config="{trigger: 'click'}"
      @edit-closed="onEditClosed">
      <vxe-table-column
        field="name"
        title="姓名"
        width="120"
        :edit-render="{name: 'VxeInput'}">
      </vxe-table-column>
      <vxe-table-column
        field="age"
        title="年龄"
        width="120"
        :edit-render="customEditRender">
      </vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {id: 1, name: '张三', age: ''},
        {id: 2, name: '李四', age: ''},
        {id: 3, name: '王五', age: ''},
      ],
    };
  },
  methods: {
    customEditRender(params) {
      const {row, column} = params;
      const value = row[column.property];
      if (value === '') {
        return {
          name: 'VxeInput',
          props: {
            type: 'text',
            value: '',
          },
          on: {
            input: (event) => {
              row[column.property] = event.target.value;
            },
          },
        };
      } else {
        return {
          name: 'VxeInput',
          props: {
            type: 'text',
            value: value,
          },
          on: {
            input: (event) => {
              row[column.property] = event.target.value;
            },
          },
        };
      }
    },
    onEditClosed(params) {
      const {row, column} = params;
      const value = row[column.property];
      if (value === '') {
        row[column.property] = null;
      }
    },
  },
};
</script>

在上面的例子中，我们通过 `customEditRender` 方法来自定义渲染器。当单元格中的值为空时，我们返回一个包含 `VxeInput` 组件的对象，用于展示输入框，并将输入框的值绑定到对应的单元格中。同时，我们监听输入框的 `input` 事件，将输入框中的值同步到单元格中。在单元格编辑结束后，我们判断单元格中的值是否为空，如果为空，将其设置为 `null`。这里需要注意的是，空值情况下必须将单元格的值设置为 `null`，而不能是空字符串 `''`，否则会导致无法触发 `v-model` 绑定的更新。

希望这个例子能对您有所帮助！