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

vxe-table 实现全部单元格都能编辑的方法

news 2024/11/15 0:13:31

Vxe UI vue vxe-table 自带的编辑是点击或者双击之后才显示编辑状态，当时公司项目的需求是要直接就看到输入框的，所以翻遍了文档，看到了通过一下方式就能直接实现了，确定是不能利用自带的增删改查功能。

在这里插入图片描述

如果需要新增或者删除，直接对数据源进行 push 等操作就行了，数据直接同步。

<template><div><vxe-tablebordershow-overflowheight="400":data="tableData"><vxe-column type="seq" width="70"></vxe-column><vxe-column field="name" title="Name" min-width="200"><template #default="{ row }"><vxe-input v-model="row.name"></vxe-input></template></vxe-column><vxe-column field="nickname" title="Nickname" width="300"><template #default="{ row }"><vxe-input v-model="row.nickname"></vxe-input></template></vxe-column><vxe-column field="role" title="Role" width="300"><template #default="{ row }"><vxe-input v-model="row.role"></vxe-input></template></vxe-column><vxe-column field="age" title="年龄" width="140"><template #default="{ row }"><vxe-number-input v-model="row.age"></vxe-number-input></template></vxe-column></vxe-table></div>
</template><script setup>
import { ref } from 'vue'const tableData = ref([{ id: 10001, name: 'Test1', nickname: '', role: 'Develop', age: null },{ id: 10002, name: 'Test2', nickname: '', role: 'Test', age: 41 },{ id: 10003, name: 'Test3', nickname: '', role: 'PM', age: 58 },{ id: 10004, name: 'Test4', nickname: '', role: 'Develop', age: 37 },{ id: 10005, name: 'Test5', nickname: '', role: 'Test', age: 20 },{ id: 10006, name: 'Test6', nickname: '', role: 'Test', age: 39 },{ id: 10007, name: 'Test7', nickname: '', role: 'Develop', age: 22 },{ id: 10008, name: 'Test8', nickname: '', role: 'Develop', age: 29 },{ id: 10009, name: 'Test9', nickname: '', role: 'Test', age: 22 }
])
</script>