前端框架view UI(iview) table表格增删改查 导入导出

一、前言

线上体验：http://121.43.41.227:8080/

源码地址：

https://pan.baidu.com/s/1_jjCQAb9TjAp1F7ZcNoaxw 
提取码：6666 
 

参考过的文章：

https://blog.csdn.net/qq_38225558/article/details/90582316

https://www.cnblogs.com/LinWenQiang/p/11876822.html

 

二、前置条件

使用 npm 来安装 viewUI和excel插件 （官方的excel插件收费 用免费的即可）

1. npm install view-design

2. npm i lay-excel

viewUI官方地址：http://v1.iviewui.com/docs/guide/install

excel插件地址：http://excel.wj2015.com/_book/

 

main.js引入ViewUI框架

三、遇到过的坑

1.vue文件命名不可以是table等标签名

2.  浅度拷贝 和 深度拷贝的区别

                ↓浅度拷贝↓
                把数据的地址赋值给对应变量，而没有把具体的数据复制给变量，变量会随数据值的变化而变化，简单来说就是多个变量指向同一个地址会出现奇奇怪怪的BUG 
                this.formData_table = row;
                this.formData_table = this.data[index]; 
                这里我们需要进行深度拷贝
                  ↓深度拷贝↓
                this.formData_table = JSON.parse(JSON.stringify(row));

 

 

四、涉及的组件和技术

1.按钮   2.表单   3.输入框   4.数字输入框   5.单选框   6.图标   7.表格   8.对话框   9.全局提示   

10.表单验证   11.利用excel插件上传和导出