vxe-table 如何实现直接渲染输入框控件，不需要点击编辑方式，直接就显示文本框

vxe-table 如何实现直接渲染输入框控件，不需要点击编辑方式，直接就显示文本框
实现思路通过自定义插槽模板来渲染控件，基本上任何 vue 的组件都能渲染，区别就是性能可能不太好，对于需求必须要这样实现的场景就非常有用了。

查看官网：https://vxetable.cn
gitbub：https://github.com/x-extends/vxe-table
gitee：https://gitee.com/x-extends/vxe-table

文本框

<template>
  <div>
    <vxe-grid v-bind="gridOptions">
      <template #role_default="{ row }">
        <vxe-input v-model="row.role"></vxe-input>
      </template>
    </vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  showOverflow: true,
  columns: [
    { type: 'seq', width: 70 },
    { field: 'name', title: 'Name' },
    { field: 'role', title: '角色', slots: { default: 'role_default' } }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop' },
    { id: 10002, name: 'Test2', role: 'Test' },
    { id: 10003, name: 'Test3', role: 'PM' }
  ]
})
</script>

文本域

由于多行文本跟输入框是不一样，还需要再设置一个行高，才能确保可以渲染多行文本域

<template>
  <div>
    <vxe-grid v-bind="gridOptions">
      <template #remark_default="{ row }">
        <vxe-textarea v-model="row.remark" style="height: 80px;"></vxe-textarea>
      </template>
    </vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  showOverflow: true,
  cellConfig: {
    height: 100
  },
  columns: [
    { type: 'seq', width: 70 },
    { field: 'name', title: 'Name' },
    { field: 'remark', title: '备注', width: 300, slots: { default: 'remark_default' } }
  ],
  data: [
    { id: 10001, name: 'Test1', remark: '备注11 备注 备注 备注 注' },
    { id: 10002, name: 'Test2', remark: '备注22 备注 备注 备注备注备注 注' },
    { id: 10003, name: 'Test3', remark: '备注 备注333 备注 备注备注333备注备注备注 备注备注333备注备注备注 备注备注333备注备注备注' }
  ]
})
</script>

https://gitee.com/x-extends/vxe-table

以上就实现了不需要点击单元格，直接就能编辑单元格控件。