vxe-table 树表格新增数据，插入指定节点位置操作

vxe-table 新增数据，插入指定节点位置操作
官网：https://vxetable.cn

1. npm install vxe-pc-ui@4.3.37 vxe-table@4.9.31

复制代码

1. // ...
2. import VxeUI from 'vxe-pc-ui'
3. import 'vxe-pc-ui/lib/style.css'
4. import VxeUITable from 'vxe-table'
5. import 'vxe-table/lib/style.css'
6. // ...
8. createApp(App).use(VxeUI).use(VxeUITable).mount('#app')
9. // ...

复制代码

1. <template>
2.   
3.     <vxe-button status="primary" @click="addEvent">新增（顶部）</vxe-button>
4.     <vxe-button status="primary" @click="pushEvent">新增（尾部）</vxe-button>
5.     <vxe-button status="primary" @click="insertEvent">新增（ID:23666位置插入）</vxe-button>
6.     <vxe-button status="success" @click="getInsertEvent">获取新增的数据</vxe-button>
7.     <vxe-table
8.       border
9.       show-overflow
10.       keep-source
11.       height="400"
12.       ref="tableRef"
13.       :row-config="rowConfig"
14.       :tree-config="treeConfig"
15.       :edit-config="editConfig"
16.       :data="tableData">
17.       <vxe-column field="name" title="Name" min-midth="300" tree-node :edit-render="{name: 'input'}"></vxe-column>
18.       <vxe-column field="size" title="Size" :edit-render="{name: 'input'}"></vxe-column>
19.       <vxe-column field="type" title="Type" :edit-render="{name: 'input'}"></vxe-column>
20.       <vxe-column field="date" title="Date" :edit-render="{name: 'input'}"></vxe-column>
21.       <vxe-column field="action" title="操作" width="220">
22.         <template #default="{ row }">
23.           <vxe-button status="primary" mode="text" @click="insertChild(row)">插入子节点</vxe-button>
24.           <vxe-button status="primary" mode="text" @click="insertRow(row)">当前位置插入</vxe-button>
25.         </template>
26.       </vxe-column>
27.     </vxe-table>
28.   
29. </template>

复制代码

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！