扈怀易 发表于 2025-6-6 18:51:32

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]
查看完整版本: vxe-table 树表格新增数据,插入指定节点位置操作