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

最新推荐文章于 2024-04-01 07:30:25 发布
最新推荐文章于 2024-04-01 07:30:25 发布
阅读量1.3k 收藏 6
点赞数 2
分类专栏： vue view ui
原文链接：https://blog.csdn.net/qq_18816201/article/details/117334775
版权
vue 同时被 2 个专栏收录
54 篇文章 1 订阅
订阅专栏
view ui
1 篇文章 0 订阅
订阅专栏

一、前言

线上体验：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插件上传和导出

<template>
	<div>
		<table style="width: 100%;">
			<tr style="float:left;">
				<td>
					<Button type="primary" icon="ios-add-circle-outline" @click='insert'>新增</Button>
				</td>
				<td>
					<label prop="name">&nbsp;姓名：&nbsp;</label>
				</td>
				<td>
					<Input placeholder="请输入要查询的姓名" v-model="inputName" style="width: 200px" />
				</td>
				<td>
					<Button type="info" @click="select">查询</Button>
				</td>
				<td>
					<Button type="primary" icon="md-cloud-upload" @click='uploadExcel'>上传excel</Button>
				</td>
				<td>
					<Button type="primary" icon="md-download" @click='exportExcel'>导出excel</Button>
				</td>
			</tr>
			<tr>
				<Table border :columns="columns" :data="data"></Table>
			</tr>
		</table>
		<!--↓↓↓ table更新的表单 ↓↓↓-->
		<!-- 
		 v-model 是否显示弹窗
		 :footer-hide 是否显示底部(包括2个默认按钮)
		 title 弹窗标题
		 ok-text 默认按钮确定的名称
		 cancel-text 默认按钮关闭的名称
		 width 弹窗宽度，影响内容控件的间距
		 on-ok 默认确定按钮绑定事件
		 on-cancel 默认取消按钮绑定事件
		 on-visible-change 弹窗打开关闭事件
		 -->
		<Modal v-model="modalConfig_table.window_udpTable" :footer-hide=true v-bind:title="modalConfig_table.title"
			v-bind:ok-text='modalConfig_table.okText' v-bind:cancel-text='modalConfig_table.cancelText' width="700"
			@on-ok="save('formData_table')" @on-cancel="cancel" @on-visible-change="reset('formData_table')">
			<!--  -->
			<Form :model="formData_table" :label-width="80" ref="formData_table" :rules="ruleValidate">
				<!--表单验证， 给 Form 设置属性 rules-->
				<Row>
					<FormItem label="姓名:" prop="name">
						<Input v-model="formData_table.name" placeholder="请输入姓名"></Input>
					</FormItem>
					<FormItem label="性别:" prop="sex">
						<RadioGroup v-model="formData_table.sex">
							<Radio label="男">
								<!-- label与formData_table.sex的值联动  sex是男则选中男 -->
								<Icon type="ios-man" />
								<span>男</span>
							</Radio>
							<Radio label="女">
								<Icon type="ios-woman" />
								<span>女</span>
							</Radio>
						</RadioGroup>
					</FormItem>
					<FormItem label="年龄:" prop="age">
						<InputNumber :min="1" v-model="formData_table.age"></InputNumber>
					</FormItem>
				</Row>
				<Row>
					<FormItem label="地址:" prop="address">
						<Input v-model="formData_table.address" type="textarea" :rows="3" placeholder="请输入你的地址" />
					</FormItem>
					<FormItem>
						<!-- 提交的单击事件  在下面的方法里面写好 -->
						<Button type="primary" @click="save('formData_table')">提交</Button>    
						<Button @click="reset('formData_table')" style="margin-left: 8px">重置</Button>
					</FormItem>
				</Row>
				<Row>
 
 
				</Row>
 
			</Form>
		</Modal>
 
		<Modal v-model="exportConfig.value" :title="exportConfig.title" :footer-hide="exportConfig.footerHide"
			:width="exportConfig.width">
			<div class="layout">
					<Layout>
					        <Header style="background-color:whitesmoke">
					        	<table>
					        		<tr>
					        			<td>
					        				<Button to="http://121.43.41.227:8080/Template/上传模板.xlsx" target="_blank" 
											icon="ios-download-outline" type="primary" >模板</Button>
					        			</td>
					        			<td>
					        				<Button type="primary" @click='uploadSave'>保存</Button>
					        			</td>
					        		</tr>
					        	</table>
					        	
					        </Header>
					        <Footer style="background-color:powderblue">
					        	<input type="file" id="upload-excel-file">
					        </Footer>
					</Layout>	
				</div>
		</Modal>
	</div>
 
</template>
<script>
	import LAY_EXCEL from 'lay-excel';
	export default {
		data() {
			return {
				columns: [{ //列属性
						title: '姓名',
						key: 'name',
						render: (h, params) => {
							return h('div', [
								h('Icon', {
									props: {
										type: 'person'
									}
								}),
								h('strong', params.row.name)
							]);
						}
					},
					{
						title: '性别',
						key: 'sex'
					},
					{
						title: '年龄',
						key: 'age'
					},
					{
						title: '地址',
						key: 'address'
					},
					{
						title: '操作',
						key: 'action',
						width: 220,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.show(params.index)
										}
									}
								}, '详情'),
								h('Button', {
									props: {
										type: 'success',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.edit(params.row, params.index)
										}
									}
								}, '编辑'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									on: {
										click: () => {
											this.remove(params.row,params.index)
										}
									}
								}, '删除')
							]);
						}
					}
				],
				data: [{ //table数据源
						name: 'John Brown',
						sex: "男",
						age: 18,
						address: 'New York No. 1 Lake Park',
 
					},
					{
						name: 'Jim Green',
						sex: "男",
						age: 24,
						address: 'London No. 1 Lake Park'
					},
					{
						name: 'Joe Black',
						sex: "男",
						age: 30,
						address: 'Sydney No. 1 Lake Park'
					},
					{
						name: 'Jon Snow',
						sex: "女",
						age: 16,
						address: 'Ottawa No. 2 Lake Park'
					},
				],
				ruleValidate: { //表单验证
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur'
					}],
					age: [{
						required: true,
						type: 'number',
						message: '请输入年龄',
						trigger: 'blur'
					}],
					address: [{
						required: true,
						message: '请输入地址',
						trigger: 'blur'
					}],
				},
				modalConfig_table: { //弹窗属性设置数据
					window_udpTable: false, //更新table弹窗的显示状态  用于全局控制
					okText: '确定按钮文字',
					cancelText: '取消按钮文字',
					title: '我是标题...'
				},
				formData_table: { //表单控件数据
					name: '',
					sex: '男',
					age: 18,
					address: '',
				},
				selectIndex: 0, //编辑行的索引
				inputName: '', //查询输入框的值
				linshi: {}, //表格数据临时存放
				exportConfig: { //导入弹窗设置
					value: false,
					title: '导入数据',
					width: '270',
					footerHide: true,
				}
			}
		},
		methods: {
			show(index) {
				this.$Modal.info({
					title: '数据详情',
					content: `姓名：${this.data[index].name}<br>性别：${this.data[index].sex}<br>
					年龄：${this.data[index].age}<br>地址：${this.data[index].address}`
				})
			},
			insert() { //打开新增窗口
				this.modalConfig_table.title = "新增";
				this.modalConfig_table.window_udpTable = true;
			},
			save(name) {
				this.$refs[name].validate((valid) => {
					if (valid) {
						let title = this.modalConfig_table.title;
						var params = JSON.parse(JSON.stringify(this.formData_table));
						if (title == "新增") {
							this.data.push(params); //新增一条
							this.$Message.success('新增成功');
						}
						if (title == "编辑") {
							/* $set参数： 1 表格数据数组   2 修改的索引   3 需要保存的数据  */
							this.$set(this.data, this.selectIndex, params);
							this.$Message.success("修改成功!");
						}
						this.modalConfig_table.window_udpTable = false //弹窗关闭
					} else {
						this.$Message.error('验证未通过!');
					}
				})
			},
			edit(row, index) { //打开编辑窗口
				this.selectIndex = index;
				this.modalConfig_table.title = "编辑"
				this.modalConfig_table.window_udpTable = true //弹窗开启
				/* 浅度拷贝的2种方式  有BUG!!!
				把数据的地址赋值给对应变量，而没有把具体的数据复制给变量，变量会随数据值的变化而变化
				this.formData_table = row;
				this.formData_table = this.data[index]; 
				这里我们需要进行深度拷贝
				  ↓深度拷贝↓
				*/
				this.formData_table = JSON.parse(JSON.stringify(row));
			},
			remove(row,index) {
                this.$Modal.confirm({
                    title: '警告',
                    content: '<p>确定删除 '+ row.name +' 吗？</p>',
                    onOk: () => {
						this.data.splice(index, 1);
						this.$Message.success("删除成功!");
                    },
                    onCancel: () => {
                        this.$Message.info('取消删除');
                    }
                });
			},
			select() {
				// 获取表格数据
				var tabledata = JSON.parse(JSON.stringify(this.data));
				// console.log(this.linshi.length)
				//如果临时数据是空的，就给它赋值全部的表格数据
				if (this.linshi.length == undefined) {
					this.linshi = tabledata;
				}
				//如果输入框的内容是空的，给表格赋值临时存储的全部数据   等于查询全部的效果
				if (this.inputName == "") {
					this.data = this.linshi;
				} else {
					// 设置一个空的数组
					let arr = [];
					// 循环遍历
					for (let i = 0; i < tabledata.length; i++) {
						if (tabledata[i].name.indexOf(this.inputName) != -1) { // 如果表格数据包含了 输入框的数据
							arr.push(tabledata[i]);
						}
					}
					// 将查找出来的数据给表格
					this.data = arr;
				}
 
			},
			cancel() {
				console.log("默认取消按钮事件");
			},
			reset(name) { // 清除文本框  重置
				// console.log(name)	
				// console.log(this.$refs[name])
				let title = this.modalConfig_table.title;
				if (title != "编辑") {
					this.$refs[name].resetFields(); //前置条件： From表单设置属性 ref="formData_table"   ，ref和v-model保持一致
					// this.formData_table = Object.assign({}, this.defaultForm);  //第二种方式重置表单
 
				}
 
			},
			exportExcel() { //导出
				let tabledata = JSON.parse(JSON.stringify(this.data));
				let exceldata = LAY_EXCEL.filterExportData(tabledata, {
					username: 'name', //排序、字段过滤、重命名
					sex: 'sex',
					address: 'address',
					age: 'age',
				});
				exceldata.unshift({ //设置列名
					username: "姓名",
					sex: '性别',
					address: '地址',
					age: '年龄',
 
				})
				LAY_EXCEL.exportExcel(exceldata, '导出测试.xlsx', 'xlsx');
			},
			uploadExcel() { //打开上传窗口
				this.exportConfig.value = true;
			},
			uploadSave() { //上传
				let thiss = this; //当前对象赋个值  后面的this会变
				let files = document.getElementById('upload-excel-file').files;
				try {
				  LAY_EXCEL.importExcel(files, {}, function (data) {
				    console.log('导入JSON：' + JSON.stringify(data));
				    data = LAY_EXCEL.filterImportData(data, {
				      'name': 'A',  //梳理时 要确保字段名对应上
				      'sex': 'B',
				      'age': 'C',
				      'address': 'D'
				    })
				    console.log('梳理后JSON：' + JSON.stringify(data)); 
					//写入数据
					let Sheet1 = data[0].Sheet1;
					for (let i = 0; i < Sheet1.length; i++) {
						if(i == 0){ //跳过列头
							continue;
						}
						// console.log(Sheet1[i]);
						thiss.data.push(Sheet1[i]); //新增一条
					}
				    thiss.exportConfig.value = false;
					thiss.$Message.success("导入成功!");
				  });
				} catch (e) {
					this.$Message.error('导入错误: ' + e.message);
				}
			}
		}
	}
</script>

南玖i
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
iview table 表格实现 单列超出隐藏 鼠标悬浮出现详情
01-07
效果图 直接复制粘贴下面代码 就可以 { title: '交易订单号', align: 'center', key: 'id', minWidth: 120, render: (h, params) => { let texts=params.row.id; //这里的params.row.id 是 key值 if(params.row.id !=null){ if(params
iview table高度动态设置方法
08-27
下面小编就为大家分享一篇iview table高度动态设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
CSS 布局系列（一）—(1)，高级前端晋升之View渲染机制
最新发布
2301_79098686的博客
04-01 881
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。
通过注解实现通用导出Excel
热门推荐
烟花散尽的专栏
03-22 2万+
Javaweb开发中数据的导入导出很常见，每次我们都需要写很多代码，所以我就在想能不能写一些通用的方法，之前已经在网上 整理过一些通用的方法，最近在网上看到一位牛人封装的更加简介，自己拿过来整理了一下。配置注解 之前我们了解了Java注解的使用,现在我们正是通过注解的方式来简化javaweb中繁琐的Excel上传和下载两个功能。由于时间有限今天先实现了Excel的下载(Excel 导出)。上面的就是
UI学习——UITableView
m0_73974920的博客
06-06 1919
以上就是本篇文章的全部内容。
Vue+ElementUI纯前端技术实现对表格数据的增删改查
qsj0606的博客
06-17 5627
Vue+ElementUI纯前端技术实现对表格数据的增删改查 页面展示效果 一、页面结构 分为三个部分 head body 以及script 一般我个人是在head中引入一些组件库 , 还有一些样式 ; style 也可以定义在其中, 通过id选择器 ,还有类选择器进行 定义 script 标签体中引入的是一些常见的组件库 LIink 标签体中引入的是一些CSS样式 body中一般是书写页面的结构 , 也就是定义一个DIV , 然后在其中书写书写页面中的各种元素 最后就是script 这里首先通过ID选中
面向前端的webview知识总结
吕大瓜的博客
11-04 1625
本篇文主要面向前端同学食用，分别从简介，内核&组件，基本配置，加载，缓存机制，通信等几个方向列举安卓和iOS有关 webview 的知识点，希望前端在和客户端同学对接时不会太懵逼..
前端学习（2758）：view基本使用
歌谣的博客
12-14 841
vue element-ui实现table表格可编辑修改
weixin_43613849的博客
12-14 1万+
代码如下：点击编辑按钮可编辑当前行，点击保存可以保存当前行，可以结合业务需要，进一步修改 <template> <div class="st-table"> <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> <template slot..
vue前端UI框架收集
qwguo
07-08 906
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。随着vue框架的火爆也催生除了很多基于vue的前端ui框架，最有代表性的框架有Element-UI、vuetifyjs、vant等优秀的框架，这里我收集了一些比较优秀的框架和他们的地址 基于 vue 的ui框架 手机 电脑 兼容框架 vuetifyjs vuetifyjs是比较流行的基于vue的前端ui框架，作者John Leider来自国外，vuetifyjs组件众多，并且电脑端，移动端通用一套代码 官网网址：.
Gridmanager,优秀表格插件，支持前端三大框架
Aixiu1016的博客
06-03 1839
GridManager是什么？ GridManager是拭目以待开发的一个开源项目，项目托管在Github。GridManager是一款具有配置灵活、使用便捷的表格组件，它快速、灵活的对Table标签进行实例化，让Table标签充满活力。目前已经具有AngularJS版本，Vue版本，React版本等兼容主流前端框架的多个版本。 GridManager有哪些基本操作？ - 宽度调整: 表格的列宽度可进行拖拽式调整 - 列位置更换: 表格的列位置进行拖拽式调整顺序 - 配置列显示隐藏: 可通...
解决iview table组件里的 固定列 表格不自适应的问题
01-18
当在使用iview Table组件里固定列功能时 出现表格不自适应宽度问题 具体如下 解决这个bug 很简单 把组件里的 width 改为 minWidth 即可 columns: [ { title: '账户名', key: 'accountName', fixed: 'left', ...
Java开发HY增删改查代码生成工具系统源码.zip
05-28
HY增删改查代码生成工具。HY增删改查代码生成工具，快速生成crud应用，支持自定义模板扩展。适合后台管理应用的基本增删该查代码的生成,简单配置即可搞定一个单页增删改查应用！...前端框架 vue element-ui iview
Iview 表格编辑
10-31
实现IviewUI表格动态编辑数据功能，便于表格数据的直接编辑和提交,内含Json数据， 下载后可部署IIS测试。
封装当文字过长时显示省略号和tooltip，以及多行溢出时显示tooltip
鹤渺的星球
06-06 2912
项目中很多地方需要显示一些字段信息，比如项目信息，项目说明的字段，总会有需求是显示当字段内容过多的时候，加省略号显示，然后显示tooltip。
服务端提供给前端的自助查询框架
fei33423的专栏
07-29 208
GraphQL升级版,支持rpc接口获取数据 . graphql DDos防御 解决问题: 前端想取哪些字段就取哪些字段. 解决方案 接口都是声明式编程. 核心知识 1. 元数据 (哪些字段属于哪个handler, 每个handler之间的数据是1对多 还是 多对多) 2. 查询的字段是属于哪几个handler.(通过元数据反向分析出来. 没有同字段就不需要调用时声明, 前期框架可以没有这个能力) 3. 查询字段筛选度有多少. 先查哪个字段? limit ,or...
vue组件实现表格增删改功能+模态框+bootstrap
qq_40994735的博客
09-02 1115
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js-css/js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="../js-css/js/jquery.min.js" typ
使用vue.js对表格进行增删改查
sl105105的博客
07-29 5251
建立简单地表格与表单方便我们的添加,并将vue中的对象内容添加至表格。
JS学习笔记——前端的webview是什么东西
MRlaochen的博客
12-08 5450
1、webview是什么？作用是什么？和浏览器有什么关系？ 先放一段基本定义： A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web page
iview的表格自定义_iview table表格的自定义样式
06-01
如果您想要对 iview 的表格进行自定义样式，可以使用以下方法： 1. 使用 scoped 样式 在组件中使用 scoped 样式，这样样式只会作用于当前组件内部，不会影响其他组件的样式。例如： ```html <template> <Table :columns="columns" :data="data" class="my-table" /> </template> <style scoped> .my-table { background-color: #fff; border: 1px solid #ccc; } </style> ``` 2. 使用 CSS 类名 iview 的表格组件提供了一些 CSS 类名，可以通过这些类名来对表格进行样式定制，例如： ```html <template> <Table :columns="columns" :data="data" class="my-table"> <template slot-scope="{ row }"> <div class="my-row">{{ row.name }}</div> </template> </Table> </template> <style> .my-table { background-color: #fff; border: 1px solid #ccc; } .my-row { color: red; } </style> ``` 以上就是两种常用的 iview 表格自定义样式的方法，您可以根据自己的需求进行选择。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值