[vxe-table] 表头：点击出现输入框

<vxe-grid v-bind="gridOptions">
  <template #header_num="{ column }">
    <div v-if="editingColumn === column.field" class="header-editor">
      <input
        v-model="editValue"
        type="text"
        class="header-input"
        @blur="saveHeader(column)"
        @keyup.enter="saveHeader(column)"
        @keyup.esc="cancelEdit"
        ref="inputRef"
      />
    </div>
    <div v-else class="header-title" @click="startEdit(column)">
      {{ column.title }}
    </div>
  </template>
</vxe-grid>

// 编辑状态管理
const editingColumn = ref(null)
const editValue = ref('')
const inputRef = ref(null)

const gridOptions = reactive({
  border: true,
  columns: [
    { type: 'seq', width: 70, title: '序号' },
    { field: 'num1', title: 'num1', width: 200, slots: { header: 'header_num' } },
    { field: 'num2', title: 'num2', width: 200, slots: { header: 'header_num' } },
    { field: 'num3', title: 'num3', width: 200, slots: { header: 'header_num' } },
    { field: 'age', title: 'age', width: 200 },
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, num1: 234, num2: 234, num3: 234, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: '1', age: 22, num1: 34, num2: 34, num3: 34, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, num1: 12, num2: 12, num3: 12, address: 'Shanghai' }
  ]
})

// 开始编辑表头
const startEdit = (column) => {
  editingColumn.value = column.field
  editValue.value = column.title
  nextTick(() => {
    // 自动聚焦到输入框
    inputRef.value?.focus()
    inputRef.value?.select()
  })
}

// 保存表头编辑
const saveHeader = (column) => {
  if (editValue.value.trim()) {
    column.title = editValue.value.trim()
  }
  editingColumn.value = null
}

// 取消编辑
const cancelEdit = () => {
  editingColumn.value = null
}