vxe-table：一个基于vue功能强大的表格组件（支持树形，编辑，增删改查以及校验等）-程序员宅基地

技术标签： vue  js  vue.js  

开门见山看效果图，看是不是你想要的

在这里插入图片描述

vxe-table（先来看看这个强大组件是什么样子）

一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等…

git地址：vxe-table.

在这里插入图片描述
vxe-table官方文档：点击查看发现新大陆，建议收藏，留着备用.

在这里插入图片描述
组件中有详细的开发指南，其实不用做我过多的介绍，根据你的需求可以进行安装和使用！
但是呢，既然分享这个组件啦，那就顺便给大家展示一下在vue项目中使用的具体步骤吧，也算自己再学习学习！

vxe-table组件在vue中实现步骤

第一步：还是先安装

依赖库：vue 2.6+, xe-utils 2.4+

// npm安装 xe-utils 和 vxe-table  
 npm install xe-utils vxe-table
第二步：在main.js中引入
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'

Vue.use(VXETable)

// 给 vue 实例挂载全局窗口对象
//如果用不到这个组件的弹窗可以不写，根据个人使用情况而定
Vue.prototype.$XModal = VXETable.modal
第三步：在需要的组件中使用
<template>
  <div >
    <vxe-toolbar>
          <template v-slot:buttons>
            <vxe-button @click="$refs.xTree.toggleTreeExpansion(tableData[0], true)">切换第一个</vxe-button>
            <vxe-button @click="$refs.xTree.setTreeExpansion(tableData[2], true)">展开第三个</vxe-button>
            <vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button>
            <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>
          </template>
        </vxe-toolbar>

        <vxe-table
          resizable
          border
          ref="xTree"
          :tree-config="{children: 'children'}"
          :edit-config="{trigger: 'click', mode: 'row'}"
          :checkbox-config="{labelField: 'id'}"
          :data="tableData">
          <vxe-table-column type="checkbox" title="ID" tree-node></vxe-table-column>
          <vxe-table-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-table-column>
          <vxe-table-column field="size" title="Size" :edit-render="{name: 'input'}"></vxe-table-column>
          <vxe-table-column field="type" title="Type" :edit-render="{name: 'input'}"></vxe-table-column>
          <vxe-table-column field="date" title="Date" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-table-column>
        </vxe-table>
  </div>
</template>

<script>
    export default {
    
          data () {
    
            return {
    
              tableData: []
            }
          },
          created () {
    
            this.tableData = window.MOCK_TREE_DATA_LIST
          }
     }
              
</script>

好了，这样你想要的树形可编辑表格就展示啦，如果你的项目有这中需求，可以试试！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44182284/article/details/106096939

智能推荐

工具说明书 - 英语翻译软件对比和英语词典选择_百度网页英语词典插件安装-程序员宅基地

文章浏览阅读1.5k次。1，百度翻译桌面版：200+语言。界面简洁清爽，操作方便。可以选择领域更好的翻译术语。翻译结果可以语音播放。APP版功能更强大，拍照翻译、语音翻译、权威词典。网页版，功能和桌面版类似，里面还有个视频翻译功能。在官方介绍页面，还有个百度同传工具。2，google翻译有网页版，带了语音翻译和朗读。手机上可以下载APP。PC端还可以下载客户端：Client for Google Translatehttp://translateclient.com3，网易有道翻译.._百度网页英语词典插件安装

Ubuntu16双网卡上网设置_ubuntu 多网卡 设置默认路由-程序员宅基地

文章浏览阅读2.6k次，点赞2次，收藏9次。文章目录前言route方法一. 删网关方法二. 增大Metric注意微信公众号前言现在有两个网络:公司的局域网192.168.3.x, 通过有线连接, 可以访问公司内网.无线连接的192.168.1.x, 可以访问外网.想要无线主力, 只有访问内网东西时采用有线, 常见做法是用到内网插有线(会自动顶掉无线), 否则拔掉网线用无线. 有没有简单点的办法?route先连上无线, 再插..._ubuntu 多网卡 设置默认路由

画图学习总结_echarts聚类图-程序员宅基地

文章浏览阅读379次。利用pyecharts画图在聚类分析后利用pyecharts画二维和三维散点图，pyecharts画的图片一般是以html文件保存首先确定x轴的数据，而后再确定y轴的数据，这样可以确定平面的数据，当然是因为聚类，分了五簇，确定了五个y的值data_1=data.valuesx=data_1[:,3]y1=x0.values[:,0]y2=x1.values[:,0]y3=x2.values[:,0]y4=x3.values[:,0]y5=x4.values[:,0](Scat_echarts聚类图

GY906 MLX90614 非接触式 红外测温传感器 LabVIEW i2c总线数据读取-程序员宅基地

文章浏览阅读5.3k次。GY906使用的红外测温芯片为MLX90614。使用LabVIEW读取i2c总线数据时，需要知道传感器的地址，出厂默认为0x5A。传感器地址支持自己修改，存放在芯片EEPROM的0x0E位置，可以通过访问EEPROM的0x0E单元来获得传感器的地址。具体修改和访问EEPROM参考链接：ARDUINO使用MLX90614红外温度传感器研究笔记_雨田大大的专栏-程序员宅基地_mlx90614红外传感器工作原理使用LabVIEW中封装好的I2C express vi可以对传感器的I2C总线进行访问_labview i2c

这些学习方法等于瞎忙-程序员宅基地

文章浏览阅读602次，点赞22次，收藏17次。任何不加验证的知识和经验都是一种空泛的存在，因为我们不掌握这些知识和经验可以使用或不可以使用的环境特征，就极容易导致关键时刻使用相关知识和经验造成严重后果，同时也会影响我们的使用积极性，所以我们所学知识、技能和经验的验证和学习本身一样重要。不注重学习的系统性、方向性和自身所处阶段的结合，投入时间去学习自身所能涉猎的任何内容，对所学学科不做阶段性规划，同一时期在学不同学科的内容，随手拿来就学，这样的学习方法无法避免知识体系之间互相的干扰和破坏，更不利于解决系统性问题。第七种、学习的过程中没有积累。

大数据运维实战第十二课 Hadoop 分布式资源管理器 Yarn、MR 运行机制剖析_yarn rmadmin-程序员宅基地

文章浏览阅读776次，点赞2次，收藏4次。本课时主要讲解了分布式资源管理器 Yarn、MR 运行机制，以及 Yarn 相关的 shell 命令，对于 Yarn 资源运行机制的了解有助于对 Hadoop 集群进行调优和故障排查，这部分内容非常重要，要求我们能熟练掌握。......_yarn rmadmin

随便推点

Demo project for Spring Boot 【1】spring-boot-starter【2】spring-boot-maven-plugin_win7 demo project for spring boot版本-程序员宅基地

文章浏览阅读474次。spring-boot-maven-plugin是一个Maven插件，用于简化Spring Boot应用程序的构建和部署过程。它提供了许多有用的功能，包括：打包可执行的JAR文件：该插件可以将Spring Boot应用程序打包为可执行的JAR文件，其中包含了所有的依赖和资源文件。自动重新加载：在开发过程中，该插件可以监视应用程序的源代码和资源文件的变化，并自动重新加载应用程序，以便快速查看修改的效果。自定义属性：通过该插件，可以方便地在构建过程中设置自定义的属性，例如应用程序的版本号、环境配置等。运行应用程_win7 demo project for spring boot版本

C语言笔记_学校进行长跑训练,规定学生第一天训练300米,第二天训练337.5米,第三天训练379.688-程序员宅基地

文章浏览阅读783次，点赞3次，收藏6次。C语言笔记程序与算法算法设计原则C程序的编写、编译和运行C程序的构成C程序编写、编译、链接程序与算法算法设计原则分而治之：复杂的程序可以分解成若干简单子程序模块化：常用程序模块是可以重复使用的C程序的编写、编译和运行C程序的构成预处理命令函数语句单词注释 //注意书写规范C程序编写、编译、链接c源程序的编写，扩展名为.c的源文件编译器编译，扩展名为.obj的目标程序链接器链接，扩展名.exe的可执行程序..._学校进行长跑训练,规定学生第一天训练300米,第二天训练337.5米,第三天训练379.688

论文浅尝 | 知识赋能的信息系统专题前言(软件学报 2023 年第 10 期)-程序员宅基地

文章浏览阅读517次。高 宏1, 陈华钧2, 赵 翔3, 李瑞轩41(浙江师范大学 计算机科学与技术学院, 浙江 金华 321019)2(浙江大学 计算机科学与技术学院, 浙江 杭州 310027)3(国防科技大学 大数据与决策实验室, 湖南 长沙 410073)4(华中科技大学 计算机科学与技术学院, 湖北 武汉 430074)通信作者: 高宏, E-mail: [email protected]; 陈..._高宏 浙江师范大学

论文-EdgeCloudSim: An environment for performance evaluation of edge computing systems-笔记-程序员宅基地

文章浏览阅读2.2k次，点赞5次，收藏37次。1、论文题目EdgeCloudSim: An environment for performance evaluation of edge computing systems ：边缘计算系统性能评估的环境2、内容摘要EdgeCloudSim的模拟器工具作为仿真工具来支持计算资源和网络资源的建模以处理边缘计算方案EdgeCloudSim建立在CloudSim之上，可满足边缘计算研究的特定需求并支持必要的功能。本文模拟了不同边缘架构的实验设置，还研究了边缘服务器容量和移动性对整体系统性能的影响_edgecloudsim: an environment for performance evaluation of edge computing sy

Golang 使用AST插桩采集当前代码执行所处函数_golang 插桩-程序员宅基地

文章浏览阅读790次。Goland 使用AST插桩采集当前代码执行所处函数_golang 插桩

iPad常用快捷键_ipad键盘alt健-程序员宅基地

文章浏览阅读1.4k次。iPad常用快捷键设备:iPad Pro 12.9 第三代键盘:罗技K380tips:部分应用中,长按cmd键会显示出当前界面应用的快捷键,学会这个就不用记那么多快捷键了系统单击F4/cmd+h　　　　返回主页双击F4　　　　　　　进入后台多任务界面cmd+tab　　　　　　顺序切换后台应用cmd+shift+3　　　　　截图alt option+cmd+D　　显示程序..._ipad键盘alt健

推荐文章

热门文章

相关标签