当前位置：首页 > news >正文

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

news 2025/6/12 17:53:50

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>