vxe-table 树表格新增数据,插入指定节点位置操作
vxe-table 新增数据,插入指定节点位置操作官网:https://vxetable.cn
npm install vxe-pc-ui@4.3.37 vxe-table@4.9.31// ...
import VxeUI from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...
createApp(App).use(VxeUI).use(VxeUITable).mount('#app')
// ...
<template>
<vxe-button status="primary" @click="addEvent">新增(顶部)</vxe-button>
<vxe-button status="primary" @click="pushEvent">新增(尾部)</vxe-button>
<vxe-button status="primary" @click="insertEvent">新增(ID:23666位置插入)</vxe-button>
<vxe-button status="success" @click="getInsertEvent">获取新增的数据</vxe-button>
<vxe-table
border
show-overflow
keep-source
height="400"
ref="tableRef"
:row-config="rowConfig"
:tree-config="treeConfig"
:edit-config="editConfig"
:data="tableData">
<vxe-column field="name" title="Name" min-midth="300" tree-node :edit-render="{name: 'input'}"></vxe-column>
<vxe-column field="size" title="Size" :edit-render="{name: 'input'}"></vxe-column>
<vxe-column field="type" title="Type" :edit-render="{name: 'input'}"></vxe-column>
<vxe-column field="date" title="Date" :edit-render="{name: 'input'}"></vxe-column>
<vxe-column field="action" title="操作" width="220">
<template #default="{ row }">
<vxe-button status="primary" mode="text" @click="insertChild(row)">插入子节点</vxe-button>
<vxe-button status="primary" mode="text" @click="insertRow(row)">当前位置插入</vxe-button>
</template>
</vxe-column>
</vxe-table>
</template>https://gitee.com/x-extends/vxe-table
来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
页:
[1]