vxe-table 如何实现直接渲染输入框控件，不需要点击编辑方式，直接就显示文本框
实现思路通过自定义插槽模板来渲染控件，基本上任何 vue 的组件都能渲染，区别就是性能可能不太好，对于需求必须要这样实现的场景就非常有用了。
查看官网：https://vxetable.cn
文本框
<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>
以上就实现了不需要点击单元格，直接就能编辑单元格控件。
