vxe-table表格新增节点

news2024/11/30 6:40:19

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

效果图

附上完整代码

<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-table
        show-overflow
        keep-source
        ref="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 = true
  return 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 = false
      resolve(null)
    }, 300)
  })
}
const searchMethod = () => {
  const $table = tableRef.value
  if ($table) {
    // 清除所有状态
    $table.clearAll()
    return findList()
  }
  return Promise.resolve()
}
const insertRow = async (currRow, locat) => {
  const $table = tableRef.value
  if ($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.value
  if ($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.value
  if ($table) {
    await $table.remove(row)
  }
}
//保存(单前行数据)
const saveRowEvent = (rows) => {
  const { row } = rows
  const $table = tableRef.value
  if ($table) {
    $table.clearEdit()
       /* .then(() => {
      getSelectRowToUpdate()
    })*/
  }
}

//取消
const cancelRowEvent = async  (rows) => {
  console.log(rows,'--->>>.rowsrows');
  const { row } = rows
  const $table = tableRef.value
  if ($table) {
    await $table.clearEdit()
    // 还原数据
    await $table.revertData(rows)
  }
}
// 展开第一个
const setTreeEvent = () => {
  const $table = tableRef.value
  if ($table) {
    $table.setTreeExpand([
      tableData.value[1],tableData.value[2]
    ], true)
  }
}

const insertEvent = async () => {
  const $table = tableRef.value
  if ($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.value
  if ($table) {
    const insertRecords = $table.getInsertRecords()
    VxeUI.modal.alert(`新增：${insertRecords.length}`)
  }
}
const getRemoveEvent = () => {
  const $table = tableRef.value
  if ($table) {
    const removeRecords = $table.getRemoveRecords()
    VxeUI.modal.alert(removeRecords.length)
  }
}
const getUpdateEvent = () => {
  const $table = tableRef.value
  if ($table) {
    const updateRecords = $table.getUpdateRecords()
    VxeUI.modal.alert(`更新：${updateRecords.length}`)
  }
}
nextTick(() => {
  // 将表格和工具栏进行关联
  const $table = tableRef.value
  const $toolbar = toolbarRef.value
  if ($table && $toolbar) {
    $table.connect($toolbar)
  }
  findList()
})
</script>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

「计算机网络」初识http协议

「计算机网络」初识http协议

前言 HTTP协议——互联网发展的基石&#xff0c;从一个最简单的“helloworld”网页&#xff0c;到现在博客平台、视频网站都离不开HTTP协议的存在。随着互联网的发展&#xff0c;Web网页的设计也越发复杂&#xff0c;前后端开发的分工也越发明确&#xff0c;HTTP作为连接前后端…
阅读更多...
扣子arixv论文检索工作流开源（Sam老师作品）

扣子arixv论文检索工作流开源（Sam老师作品）

因为在扣子上找不到好用的AI论文检索Bot&#xff0c;之前借助工作流和arxiv.org API开发了一个工具&#xff0c;当时写了一篇介绍。 核心流程比较简单&#xff0c;但有很多同学咨询了解&#xff0c;今天抽了点时间把工作流完全开源了。为了方便对比&#xff0c;在公共Team中通过…
阅读更多...
pytest + yaml 框架 - 65.Pycharm 设置 yaml 格式用例模板，高效写用例

pytest + yaml 框架 - 65.Pycharm 设置 yaml 格式用例模板，高效写用例

前言 初学者对yaml 格式不太熟悉，自己写yaml用例的时候，总是格式对不齐，或者有些关键字会忘记。 于是我们可以在pycharm上设置用例模块，通过快捷方式调用出对应的模块，达到高效写用例的目的。 pycharm设置用例模板 File - Settings Live Templates - python 点 + 号…
阅读更多...
RabbitMQ实践——交换器（Exchange）绑定交换器

RabbitMQ实践——交换器（Exchange）绑定交换器

在《RabbitMQ实践——交换器&#xff08;Exchange&#xff09;和绑定&#xff08;Banding&#xff09;》一文中&#xff0c;我们实验了各种交换器。我们可以把交换器看成消息发布的入口&#xff0c;而消息路由规则则是由“绑定关系”&#xff08;Banding&#xff09;来定义&…
阅读更多...
中国姓名学十大权威专家颜廷利：全国排名第一的起名大师

中国姓名学十大权威专家颜廷利：全国排名第一的起名大师

颜廷利教授,是济南市历城区唐王镇的名人,位居2023年中国当代十大国学大师排行榜之首。全国排名第一的起名大师颜廷利教授以其深厚的学术造诣和卓越的贡献赢得了名誉和尊重,成为当代国学界的翘楚。他从事国学研究已有数十年,对经史子集的研究融会贯通,展现出了非凡的学术造诣。中…
阅读更多...
springboot宠物医院信息管理系统-计算机毕业设计源码04164

springboot宠物医院信息管理系统-计算机毕业设计源码04164

摘 要 现如今在中国&#xff0c;随着人民生活质量的逐渐提高&#xff0c;以及人民群众消费能力的日渐增长&#xff0c;各种各样的家养小动物&#xff0c;已经逐渐成为人类越来越亲密的生活伴侣。并且&#xff0c;现如今社会竞争及其激烈&#xff0c;人们的生活节奏越发急促、紧…
阅读更多...
FreeRTOS:4.内存管理

FreeRTOS:4.内存管理

FreeRTOS内存管理 目录 FreeRTOS内存管理1. 为什么不直接使用C库函数的malloc和free函数2. FreeRTOS的五种内存管理方式3. heap4源码分析3.1 堆内存池3.2 内存块的链表数据结构3.3 堆的初始化3.4 堆的内存分配3.5 堆的内存释放 4. 总结 1. 为什么不直接使用C库函数的malloc和fr…
阅读更多...
【已解决】引用官网的 Element-Message 消息框居然报错为什么呢？

【已解决】引用官网的 Element-Message 消息框居然报错为什么呢？

vue 版本 &#xff1a; vue3 编程语言&#xff1a;JavaScript os: macos13 组件 &#xff1a;element-plus 问题组件&#xff1a; Message 信息框 问题&#xff1a;想学习使用 element 官网里的组件&#xff0c;我找到了message 消息提示&#xff0c;然后我就把代码复制下来放到…
阅读更多...
日历选择组件（打卡，日期计划，日期选择，特别日期标志）-VUE3

日历选择组件（打卡，日期计划，日期选择，特别日期标志）-VUE3

自己封装的目的&#xff1a; 使用场景&#xff1a;打卡&#xff0c;日期计划&#xff0c;日期选择&#xff0c;特别日期标志 根据自己的需求可以定制化何样式 不依赖任何第三方插件或者组件&#xff0c; 效果图&#xff1a; 1、日历组件封装 <template><div clas…
阅读更多...
把Vue项目从Window系统迁移到Mac系统的方案

把Vue项目从Window系统迁移到Mac系统的方案

不能启动vue ui 直接运行&#xff0c;会报错如下&#xff1a; failed to load config from /Users/xiaochen/IdeaProjects/ChatViewer-frontend/vite.config.tserror when starting dev server: Error: You installed esbuild for another platform than the one youre curre…
阅读更多...
关于LLM：揭秘token与embedding的机制

关于LLM：揭秘token与embedding的机制

「GPT4 Turbo 的上下文长度为 128K token」 「Claude 2.1 的上下文长度为 200K token」 听起来像是一些重要的细节&#xff0c;那么token到底是什么&#xff1f; 请看一句话——It’s over 9000&#xff01; 我们可以将其表示为 [“It’s”, “over”, “9000!”] 每个数组…
阅读更多...
救命！接手了一个老项目，见到了从业10年以来最烂的代码！

救命！接手了一个老项目，见到了从业10年以来最烂的代码！

后台回复“书籍”&#xff0c;免费领取《程序员书籍资料一份》 后台回复“5000”&#xff0c;免费领取面试技术学习资料一份 在程序员这个行业从业快10年了&#xff0c;每过几个月回头看看自己写的代码&#xff0c;都会觉得写的也太烂了&#xff0c;不敢想象是自己之前写的。…
阅读更多...
CorelDRAW2024破解版看这里！免费分享

CorelDRAW2024破解版看这里！免费分享

亲爱的设计爱好者们&#xff0c;你们好呀&#xff01;今天我要给大家种草一款神奇的软件——CorelDRAW 2024&#xff01;&#x1f929;&#x1f389; 作为一位软件技术爱好者&#xff0c;我一直在寻找那些能让我们事半功倍的工具。最近&#xff0c;我在数字设计领域发现了一个…
阅读更多...
【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 目录管理器(200分) - 三语言AC题解(Python/Java/Cpp)

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 目录管理器(200分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ，一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 ｜ 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 📎在线评测链接 目录管理器(200分) 🌍 评测功能需要订阅专栏后私信联系清隆…
阅读更多...
QShop商城-短信通知配置

QShop商城-短信通知配置

QShop商城-短信通知配置 本系统短信通知配置可选阿里云/腾讯云,二者二选一即可. 阿里云短信 一、登录阿里云短信平台 阿里云短信平台管理地址&#xff1a;https://dysms.console.aliyun.com/dysms.html 二、账户ID和秘钥&#xff08;AccessKeyId 和 AccessKeySecret&#x…
阅读更多...
认识一些分布函数-Frechet分布及其应用

认识一些分布函数-Frechet分布及其应用

1. 何为Frechet分布 Frechet分布也称为极值分布（EVD）类型II，用于对数据集中的最大值进行建模。它是四种常用极值分布之一。另外三种是古贝尔分布、威布尔分布和广义极值分布（Gumbel Distribution, the Weibull Distribution and the Generalized Extreme Value Distributi…
阅读更多...
3D 图片悬停效果

3D 图片悬停效果

3D 图片悬停效果 效果展示 CSS 知识点 background 属性的综合运用transform 属性的综合运用 页面整体布局 <div class"box"><span style"--i: 0"></span><span style"--i: 1"></span><span style"--i…
阅读更多...
数据资产管理的未来趋势：洞察技术前沿，探讨数据资产管理在云计算、大数据、区块链等新技术下的发展趋势

数据资产管理的未来趋势：洞察技术前沿，探讨数据资产管理在云计算、大数据、区块链等新技术下的发展趋势

一、引言 随着信息技术的飞速发展&#xff0c;数据已成为企业最重要的资产之一。数据资产管理作为企业核心竞争力的关键组成部分&#xff0c;其发展趋势和技术创新受到了广泛关注。特别是在云计算、大数据、区块链等新技术不断涌现的背景下&#xff0c;数据资产管理面临着前所…
阅读更多...
常用的JDK调优监控工具整理

常用的JDK调优监控工具整理

JVM 调优首先要做的就是监控 JVM 的运行状态&#xff0c;这就需要用到各种官方和第三方的工具包了 一、 JDK 工具包 JDK 自带的 JVM 工具可以分为命令行工具和可视化工具 命令行工具 jps: JVM Process status tool&#xff1a;JVM进程状态工具&#xff0c;查看进程基本信息j…
阅读更多...
阻塞IO、非阻塞IO、IO复用的区别 ？（非常详细）零基础入门到精通，收藏这一篇就够了

阻塞IO、非阻塞IO、IO复用的区别 ？（非常详细）零基础入门到精通，收藏这一篇就够了

前言 在《Unix网络编程》一书中提到了五种IO模型&#xff0c;分别是&#xff1a;阻塞IO、非阻塞IO、IO复用、信号驱动IO以及异步IO。本篇文章主要介绍IO的基本概念以及阻塞IO、非阻塞IO、IO复用三种模型&#xff0c;供大家参考学习。 一、什么是IO 计算机视角理解IO: 对于计…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023