vxe-table表格新增节点

做前端的朋友可以参考下:也可结合实际需求查看相应的官方文档

效果图

附上完整代码

<template><div><vxe-toolbar ref="toolbarRef" :refresh="{queryMethod: searchMethod}" export print custom><template #buttons><vxe-button @click="insertEvent">新增</vxe-button><vxe-button @click="getInsertEvent">获取新增</vxe-button><vxe-button @click="getRemoveEvent">获取删除</vxe-button><vxe-button @click="getUpdateEvent">获取修改</vxe-button><vxe-button @click="setTreeEvent">展开</vxe-button></template></vxe-toolbar><vxe-tableshow-overflowkeep-sourceref="tableRef":row-config="{keyField: 'id'}":column-config="{resizable: true}":print-config="{}":export-config="{}":loading="loading":tree-config="{transform: true, rowField: 'id', parentField: 'parentId',iconOpen: 'vxe-icon-square-minus',iconClose: 'vxe-icon-square-plus'}":edit-config="{trigger: 'click', autoClear:false, mode: 'row', showStatus: true}":data="tableData"><vxe-column type="checkbox" width="60"></vxe-column><vxe-column field="name" title="ID" tree-node></vxe-column><vxe-column field="size" title="Size" width="100" :edit-render="{}"><template #edit="{ row }"><vxe-input v-model="row.size" mode="text"></vxe-input></template></vxe-column><vxe-column field="date" title="Date" :edit-render="{}"><template #edit="{ row }"><vxe-input v-model="row.date" type="date" transfer></vxe-input></template></vxe-column><vxe-column title="操作" width="640"><template #default="{ row }"><vxe-button mode="text" status="primary" @click="insertRow(row, 'current')">当前位置插入</vxe-button><vxe-button mode="text" status="primary" @click="insertNextRow(row, 'current')">下一行插入</vxe-button><vxe-button mode="text" status="primary" @click="insertRow(row, 'top')">顶部插入</vxe-button><vxe-button mode="text" status="primary" @click="insertRow(row, 'bottom')">尾部插入</vxe-button><vxe-button mode="text" status="danger" @click="removeRow(row)">删除</vxe-button><vxe-button mode="text" status="danger" @click="saveRowEvent(row)">保存</vxe-button><vxe-button mode="text" status="danger" @click="cancelRowEvent(row)">取消</vxe-button></template></vxe-column></vxe-table></div>
</template><script setup>
import { ref, nextTick } from 'vue'
import { VxeUI } from 'vxe-table'
const loading = ref(false)
const tableData = ref([])
const tableRef = ref()
const toolbarRef = ref()
const findList = () => {loading.value = truereturn new Promise(resolve => {setTimeout(() => {tableData.value = [{ id: 10000, parentId: null, name: 'vxe-table test abc1', type: 'mp3', size: 1024, date: '2020-08-01' },{ id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: 0, date: '2021-04-01' },{ id: 24300, parentId: 10050, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },{ id: 20045, parentId: 24300, name: 'vxe-table test abc4', type: 'html', size: 600, date: '2021-04-01' },{ id: 10053, parentId: 24300, name: 'vxe-table test abc96', type: 'avi', size: 0, date: '2021-04-01' },{ id: 24330, parentId: 10053, name: 'vxe-table test abc5', type: 'txt', size: 25, date: '2021-10-01' },{ id: 21011, parentId: 10053, name: 'Test6', type: 'pdf', size: 512, date: '2020-01-01' },{ id: 22200, parentId: 10053, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },{ id: 23666, parentId: null, name: 'Test8', type: 'xlsx', size: 2048, date: '2020-11-01' },{ id: 23677, parentId: 23666, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },{ id: 23671, parentId: 23677, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },{ id: 23672, parentId: 23677, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },{ id: 23688, parentId: 23666, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },{ id: 23681, parentId: 23688, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },{ id: 23682, parentId: 23688, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },{ id: 24555, parentId: null, name: 'vxe-table test abc9', type: 'avi', size: 224, date: '2020-10-01' },{ id: 24566, parentId: 24555, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },{ id: 24577, parentId: 24555, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' }]loading.value = falseresolve(null)}, 300)})
}
const searchMethod = () => {const $table = tableRef.valueif ($table) {// 清除所有状态$table.clearAll()return findList()}return Promise.resolve()
}
const insertRow = async (currRow, locat) => {const $table = tableRef.valueif ($table) {const date = new Date()// 如果 null 则插入到目标节点顶部// 如果 -1 则插入到目标节点底部// 如果 row 则有插入到效的目标节点该行的位置const rid = Date.now()if (locat === 'current') {const record = {name: `${rid}`,id: rid,parentId: currRow.parentId,date: `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`}const { row: newRow } = await $table.insertAt(record, currRow)await $table.setEditRow(newRow) // 插入子节点} else if (locat === 'top') {const record = {name: `新数据${rid}`,id: rid,parentId: currRow.id,date: `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`}const { row: newRow } = await $table.insert(record)await $table.setTreeExpand(currRow, true) // 将父节点展开await $table.setEditRow(newRow) // 插入子节点} else if (locat === 'bottom') {const record = {name: `新数据${rid}`,id: rid,parentId: currRow.id,date: `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`}const { row: newRow } = await $table.insertAt(record, -1)await $table.setTreeExpand(currRow, true) // 将父节点展开await $table.setEditRow(newRow) // 插入子节点}}
}
const insertNextRow = async (currRow, locat) => {const $table = tableRef.valueif ($table) {const date = new Date()// 如果 null 则插入到目标节点顶部// 如果 -1 则插入到目标节点底部// 如果 row 则有插入到效的目标节点该行的位置const rid = Date.now()if (locat === 'current') {const record = {name: `新数据${rid}`,id: rid,parentId: currRow.parentId,date: `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`}const { row: newRow } = await $table.insertNextAt(record, currRow)await $table.setEditRow(newRow) // 插入子节点}}
}
const removeRow = async (row) => {const $table = tableRef.valueif ($table) {await $table.remove(row)}
}
//保存(单前行数据)
const saveRowEvent = (rows) => {const { row } = rowsconst $table = tableRef.valueif ($table) {$table.clearEdit()/* .then(() => {getSelectRowToUpdate()})*/}
}//取消
const cancelRowEvent = async  (rows) => {console.log(rows,'--->>>.rowsrows');const { row } = rowsconst $table = tableRef.valueif ($table) {await $table.clearEdit()// 还原数据await $table.revertData(rows)}
}
// 展开第一个
const setTreeEvent = () => {const $table = tableRef.valueif ($table) {$table.setTreeExpand([tableData.value[1],tableData.value[2]], true)}
}const insertEvent = async () => {const $table = tableRef.valueif ($table) {const date = new Date()const rid = Date.now()const record = {name: `新数据${rid}`,id: rid,parentId: null,date: `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`}const { row: newRow } = await $table.insert(record)await $table.setEditRow(newRow)}
}
const getInsertEvent = () => {const $table = tableRef.valueif ($table) {const insertRecords = $table.getInsertRecords()VxeUI.modal.alert(`新增:${insertRecords.length}`)}
}
const getRemoveEvent = () => {const $table = tableRef.valueif ($table) {const removeRecords = $table.getRemoveRecords()VxeUI.modal.alert(removeRecords.length)}
}
const getUpdateEvent = () => {const $table = tableRef.valueif ($table) {const updateRecords = $table.getUpdateRecords()VxeUI.modal.alert(`更新:${updateRecords.length}`)}
}
nextTick(() => {// 将表格和工具栏进行关联const $table = tableRef.valueconst $toolbar = toolbarRef.valueif ($table && $toolbar) {$table.connect($toolbar)}findList()
})
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/27829.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法训练营第六十天(延长12天添加图论) | LeetCode 647 回文子串、LeetCode 516 最长回文子序列

LeetCode 67 回文子串 思路很简单&#xff0c;每一个dp[i]等于dp[i-1]加上当前字符向前直到0各个长度字符串回文串个数即可 代码如下&#xff1a; class Solution {public boolean isValid(String s) {int l 0, r s.length() - 1;while (l < r) {if (s.charAt(l) ! s.ch…

MAC 下搭建LVGL仿真器

0.前置条件&#xff0c;保证电脑已经安装cmake&#xff0c;sdl2. 1. 下载仿真器代码&#xff1a;&#xff1a; git clone https://github.com/lvgl/lv_sim_vscode_sdl.git 2. 因为上面的仓库默认是没有lvgl源码&#xff0c;故cd 到lv_sim_vscode_sdl目录下&#xff0c;再下…

08:打印字符

OpenJudge - 08:打印字符 描述 输入一个ASCII码&#xff0c;输出对应的字符。 输入 一个整数&#xff0c;即字符的ASCII码&#xff0c;保证存在对应的可见字符。 输出 一行&#xff0c;包含相应的字符。 样例输入 65 样例输出 A >>>>>>分割线>>>>…

代码随想录算法训练营第三十八天| 509. 斐波那契数、70. 爬楼梯、 746. 使用最小花费爬楼梯

LeetCode 509. 斐波那契数 题目链接&#xff1a;https://leetcode.cn/problems/fibonacci-number/description/ 文章链接&#xff1a;https://programmercarl.com/0509.%E6%96%90%E6%B3%A2%E9%82%A3%E5%A5%91%E6%95%B0.html 思路 public int fib(int n) {// dp[i]表示第i个数…

Java 注解设计 -- Java 语言注解的介绍、高阶应用与自定义注解

大家好,我是栗筝i,这篇文章是我的 “栗筝i 的 Java 技术栈” 专栏的第 012 篇文章,在 “栗筝i 的 Java 技术栈” 这个专栏中我会持续为大家更新 Java 技术相关全套技术栈内容。专栏的主要目标是已经有一定 Java 开发经验,并希望进一步完善自己对整个 Java 技术体系来充实自…

如何通过抖音自动评论精准获客实现业务增长?这些方法值得一试!

在当今竞争激烈的商业环境中&#xff0c;企业若想脱颖而出&#xff0c;就必须掌握精准获客的艺术。精准获客&#xff0c;即通过精确的市场定位和营销策略&#xff0c;吸引并保留最有可能成为客户的目标群体。它不仅能提高转化率&#xff0c;还能有效降低营销成本&#xff0c;是…

搭建自己的AI模型应用网站:JavaScript + Flask-Python + ONNX

1. 前言 本文作者以一个前端新手视角&#xff0c;部署自己的神经网络模型作为后端&#xff0c;搭建自己的网站实现应用的实战经历。目前实现的网页应用有&#xff1a; AI 语音服务主页AI 语音识别AI 语音合成AI CP号码生成器 欢迎大家试用感受&#xff0c;本文将以博客基于G…

linux信息查询

技术|17 种查看 Linux 物理内存的方法 apt install -y neofetch screenfetch glances glances 0x41 - 1.54/1.54GHz user system idle iowait steal MEM - 53.0% active 168M SW…

程序设计实践--4

数阵 矩阵加法 程序先输入两个整数m, n(0<=m,n<=100),分别表示矩阵的行数和列数,然后分别输入m行n列的两个矩阵A,B。 输出描述 输出矩阵相加的结果。 用例输入 1 3 4 1 2 3 4 5 6 7 8 1 0 1 0 3 4 2 1 4 6 7 9 3 4 2 0 用例输出 1 4 6 5 5 9 12 14 17 4 4 3 0 #…

机器人运动学笔记

一、建模 参考资料&#xff1a;https://zhuanlan.zhihu.com/p/137960186 1、三维模型和连杆、关节定义 2、设置z轴 SDH和MDH会不一样&#xff0c;主要的区别在于SDH中坐标系在连杆末端&#xff0c;MDH中坐标系在连杆首端。虽然这里只是给出z轴&#xff0c;但是由于后面原点位…

【C++】Template模板

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…

【计算机视觉】人脸算法之图像处理基础知识(五)

图像的几何变换 3.图像的旋转 图像的旋转就是让图像按照某一点旋转到指定的角度。需要确定3个参数&#xff1a;图像的旋转中心、旋转角度和缩放因子。在openv中通过getRotationMatrix2D()函数来实现图像的旋转。 import cv2 import numpy as npimgpath "images/img1.j…

datalist 是什么?

<datalist> 是 HTML5 中的一个元素&#xff0c;它用于提供一个“预定义”的选项列表&#xff0c;这些选项可供用户在 <input> 元素中使用。用户可以在列表中选择一个预定义的选项&#xff0c;或者直接输入其他值。<datalist> 元素与 <input> 元素一起使…

CrossOver和PD虚拟机谁更强大?CrossOver和PD虚拟机应该怎么选择

在当前的虚拟化技术和应用程序兼容性解决方案中&#xff0c;CrossOver和PD虚拟机&#xff08;Parallels Desktop&#xff09;都是备受用户喜爱的选择。对于需要在非原生系统上运行应用程序的用户而言&#xff0c;选择合适的工具尤为重要。那么&#xff0c;CrossOver和PD虚拟机谁…

实现抖音视频滑动功能vue3+swiper

首先,你需要安装和引入Swiper库。可以使用npm或者yarn进行安装。 pnpm install swiper然后在Vue组件中引入Swiper库和样式。 // 导入Swiper组件和SwiperSlide组件,用于创建轮播图 import {Swiper, SwiperSlide } from swiper/vue; // 导入Swiper的CSS样式,确保轮播图的正确…

Java SSTI服务端模版注入漏洞原理与利用

文章目录 前言Velocity基础语法基础示例命令执行 靶场实践漏洞代码漏洞验证检测工具 FreeMarker基础示例漏洞示例CMS案例 Thymeleaf基础示例漏洞示例安全方案 总结 前言 SSTI&#xff08;Server Side Template Injection&#xff09;全称服务端模板注入漏洞&#xff0c;在 Jav…

java求两个整数相除得到的小数

在 Java 中,进行整数相除操作时,如果操作数都是整数,结果也会是整数,并且小数部分会被丢弃。如果你希望得到一个包含小数部分的结果,你需要将其中至少一个操作数转换为浮点类型(如 double 或 float)。 类型转换 public class DivisionExample {public static void mai…

挑战5分钟内基于Springboot+SpringMVC+Mybatis-plus快速构建web后端三层架构

目标 在清晨的代码编辑器上&#xff0c;一场新的挑战即将开始。程序员们肃立于安静的办公室&#xff0c;眼神专注地盯着屏幕&#xff0c;等待着编译器的一声提示。 随着编译器输出的激动人心的"start!"的提示&#xff0c;战斗的序幕拉开了。Bug如潮水般涌来&#x…

Java面试题:Redis主从复制

主从复制 提供Redis的并发能力 搭建主从集群,实现读写分离: 在主节点进行读操作 在从节点进行写操作 在主节点进行写操作时需要将数据同步到从节点 主从复制的原则 如果从节点是第一次同步主节点,就需要做全量同步 如果从节点不是第一次同步主节点,那只需要做增量同步即…

python保存文件后打不开的原因是什么

引入数据集&#xff0c;奇怪的是怎么也打不开&#xff0c;显示不存在这个文件&#xff1a; 但是&#xff0c;我将文件改个名字&#xff0c;就打开了&#xff0c;难道csv的文件命名必须有一定合法性&#xff1f; import pandas users pandas.read_csv("H:\python\data an…