找回密码
 立即注册
首页 资源区 代码 vxe-table 如何实现直接渲染输入框控件,不需要点击编辑 ...

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

万妙音 2025-6-10 20:21:58
vxe-table 如何实现直接渲染输入框控件,不需要点击编辑方式,直接就显示文本框
实现思路通过自定义插槽模板来渲染控件,基本上任何 vue 的组件都能渲染,区别就是性能可能不太好,对于需求必须要这样实现的场景就非常有用了。
查看官网:https://vxetable.cn
文本框

1.png
  1. <template>
  2.   
  3.     <vxe-grid v-bind="gridOptions">
  4.       <template #role_default="{ row }">
  5.         <vxe-input v-model="row.role"></vxe-input>
  6.       </template>
  7.     </vxe-grid>
  8.   
  9. </template>
复制代码
文本域

由于多行文本跟输入框是不一样,还需要再设置一个行高,才能确保可以渲染多行文本域
2.png
  1. <template>
  2.   
  3.     <vxe-grid v-bind="gridOptions">
  4.       <template #role_default="{ row }">
  5.         <vxe-input v-model="row.role"></vxe-input>
  6.       </template>
  7.     </vxe-grid>
  8.   
  9. </template>
复制代码
以上就实现了不需要点击单元格,直接就能编辑单元格控件。

来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
您需要登录后才可以回帖 登录 | 立即注册