Vue+Element-ui实例_可编辑表格和分页

最新推荐文章于 2024-06-25 15:15:37 发布
最新推荐文章于 2024-06-25 15:15:37 发布
阅读量1.8k 收藏 8
点赞数 2
分类专栏： # vue + element-ui实例 文章标签： vue javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40601005/article/details/109091488
版权

下面是一个可以实现编辑的表格，并且该表格嵌入在form表单内，可以对已修改的内容进行保存提交；而且实现了对表格数据进行关键字搜索和分类筛选的功能，实现了前端分页的效果。

主要难点：

（1）当el-table列数据过多时，我们可以通过设置 type="expand" 和 Scoped slot 可以开启展开行功能，然后在每一行设置一个可编辑按钮，对展开的数据中的某条数据进行再编辑。

（2）当你设置可编辑按钮时，还要对此行展开状态进行判断，判断该行是否为展开，若已展开，则编辑，若未展开，则展开进行编辑。

（3）当对某一行进行编辑时，如该行未确认完成编辑，则不能对其他行再进行编辑，需要对该行确认完成编辑，才可对其他行进行编辑操作。

（4）对数据进行分页展示。

（5）对数据进行关键字搜索和根据分类对每页数据进行筛选。

（6）保存和提交数据的检验。

效果图如下：

效果图（1）
概览

效果图（2）

效果图（3）

效果图（4）

效果视频如下：

可编辑el-table表格演示视频

下面是代码部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>可编辑表格</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
		<script src="../vue/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../elementUI/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="../vue/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../elementUI/index.css" />
		<style type="text/css">
			.menu {
				width: 100%;
				height: 100%;
			}

			.container_table {
				width: 100%;
			}

			.el-table .cell {
				text-align: center;
			}

			.postForm {
				width: 340px;
				height: 40px;
				float: right;
				margin-top: -40px;
			}

			/* 展开的form样式 */
			.demo-table-expand label {
				width: 90px;
				color: #99a9bf;
			}

			.el-form--label-left .el-form-item__label {
				text-align: right;
			}

			.demo-table-expand .el-form-item {
				margin-right: 0;
				margin-bottom: 0;
				width: 30%;
			}

			.container_table .fy {
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<div id="menu" class="menu">
			<el-container>
				<div class="container_table">
					<el-form :model="tableData" @submit.native.prevent>
						<el-table ref="refTable" height="500" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
						 style="width: 100%" @expand-change="expandChange">
							<el-table-column type="expand">
								<template slot-scope="props">
									<el-form label-position="left" inline class="demo-table-expand">
										<el-form-item label="日期">
											<span>{{ props.row.date }}</span>
										</el-form-item>
										<el-form-item label="姓名">
											<span>{{ props.row.name }}</span>
										</el-form-item>
										<el-form-item label="手机号">
											<span v-if="props.row.isSet">{{props.row.phone}}</span>
											<span v-else>
												<el-input clearable v-model="props.row.phone"></el-input>
											</span>
										</el-form-item>
										<el-form-item label="地址">
											<span v-if="props.row.isSet">{{props.row.address}}</span>
											<span v-else>
												<el-input type="textarea" clearable autosize v-model="props.row.address"></el-input>
											</span>
										</el-form-item>
										<el-form-item label="部门">
											<span>{{ props.row.tag }}</span>
										</el-form-item>
									</el-form>
								</template>
							</el-table-column>
							<el-table-column prop="date" label="日期" sortable width="120" column-key="date">
							</el-table-column>
							<el-table-column prop="name" label="姓名">
							</el-table-column>
							<el-table-column prop="phone" label="手机号">
							</el-table-column>
							<el-table-column prop="address" label="地址">
							</el-table-column>
							<el-table-column prop="tag" label="部门" width="140" :filters="sectorData" :filter-method="filterTag">
								<template slot-scope="scope">
									<el-tag size="medium" disable-transitions>{{scope.row.tag}}</el-tag>
								</template>
							</el-table-column>
							<el-table-column prop="searchInfo" width="200">
								<template slot="header" slot-scope="scope">
									<el-input clearable v-model="search" prefix-icon="el-icon-search" size="mini" placeholder="输入姓名关键字搜索" @input="searchName" />
								</template>
								<template slot-scope="scope">
									<el-button :disabled="btnDisabled" plain icon="el-icon-edit" v-if="scope.row.isSet" @click="handleEdit(scope.$index, scope.row)"
									 size="mini">编辑</el-button>
									<el-button plain v-else @click="saveEdit(scope.$index, scope.row)" size="mini">确定</el-button>

								</template>
							</el-table-column>
						</el-table>
					</el-form>
					<el-pagination class="fy" :current-page="currentPage" :page-sizes="[5, 10, 20]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
					 @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="tableData.length" background>
					</el-pagination>
					<div class="postForm">
						<el-button icon="el-icon-finished" type="primary" @click="postForm">提交</el-button>
						<el-button icon="el-icon-check" type="success" @click="saveForm">保存</el-button>
						<el-button icon="el-icon-back" type="info" @click="backtrack">撤回</el-button>
					</div>
				</div>
			</el-container>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#menu',
			data() {
				return {
					/* 表格数据 */
					tableData: [],
					/* 原始表格数据 */
					oldtableData: [],
					/* 部门数据 */
					sectorData: [],
					pagesize: 5, //每页的数据条数
					currentPage: 1, //默认开始页面
					search: '', //搜索关键字
					btnDisabled: false,
				};
			},
			methods: {
				/* 部门筛选 */
				filterTag(value, row, column) {
					console.log(value);
					// console.log(row);
					return row.tag === value;
				},
				/* 分页方法 */
				handleSizeChange(val) {
					// console.log(`每页 ${val} 条`);
					this.pagesize = val;
				},
				handleCurrentChange: function(val) {
					// console.log(`当前页: ${val}`);
					this.currentPage = val;
				},
				/* 姓名关键字搜索 */
				searchName(search) {
					var newList = [];
					// console.log(search);
					if (search != '') {
						vm.oldtableData.forEach(item => {
							if (item.name.indexOf(search) != -1) {
								//空字符串包含在所有字符串中，因此控制会返回所有列表
								newList.push(item);
							}
						});
						return this.tableData = newList;
					} else {
						return this.tableData = this.oldtableData;
					}

				},
				/* 更改每一行的张开/关闭状态 */
				expandChange(row, expandedRows) {
					row.isExpand = !row.isExpand;
				},
				/* 开启编辑单元格 */
				handleEdit(index, row, e) {
					for (const i of this.tableData) {
						if (!i.isSet) {
							return this.$message.warning('请先保存当前编辑项');
						}
					}
					if (!row.isExpand) {
						//调用,table的方法,展开/折叠 行
						this.$refs.refTable.toggleRowExpansion(row);
					}
					row.isSet = false;

				},
				/* 保存单元格，进行编辑验证 */
				saveEdit(index, row, column) {
					// console.log(row);
					if ((row.address.replace(/\s+/g, '') == '' || (row.phone.replace(/\s+/g, '') == ''))) {
						row.isSet = false;
						return this.$message.error('数据不能为空');
					} else {
						row.isSet = true;
					}
					//调用,table的方法,展开/折叠 行
					this.$refs.refTable.toggleRowExpansion(row);
				},
				/* 提交表单 */
				postForm() {
					if (!this.btnDisabled) {
						return this.$message.error('请先保存');
					} else {
						this.$confirm('是否提交?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then((action) => {
							this.$message({
								type: 'success',
								message: '提交成功!',

							});
							if (action === 'confirm') {
								//提交表单
								console.log(this.tableData);
							}
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消提交!'
							});
						});
					}
				},
				/* 保存表单 */
				saveForm() {
					for (var i = 0; i < this.tableData.length; i++) {
						if (!this.tableData[i].isSet) {
							this.$message.warning('请先保存当前编辑项');
							return this.btnDisabled = false;
						} else {
							this.btnDisabled = true;
						}
					}
				},
				/* 撤回保存 */
				backtrack() {
					this.btnDisabled = false;
				},
				/* 获取内容数据 */
				getTableData() {
					axios.get('../data/tableData.json', {})
						.then(function(res) {
							for (var i = 0; i < res.data[0].tableData.length; i++) {
								// 添加单元格是否可以编辑的属性值
								res.data[0].tableData[i].isSet = true;
								// 添加行是否展开的属性值
								res.data[0].tableData[i].isExpand = false;
							}
							console.log(res.data);
							// 赋值
							vm.tableData = res.data[0].tableData;
							vm.oldtableData = res.data[0].tableData;
							vm.sectorData = res.data[1].sectorData;
						}).catch(function(error) {
							console.log(error);
						});
				}
			},
			mounted() {
				// 获取内容数据
				this.getTableData();
			}

		});
	</script>
</html>

data数据如下：

[{
		"tableData": [{
				"date": "2016-05-01",
				"name": "张晓明",
				"phone": "18852067999",
				"address": "上海市普陀区金沙江路 11 弄",
				"tag": "设计三所"

			}, {
				"date": "2016-05-02",
				"name": "李米中",
				"phone": "18852067999",
				"address": "上海市普陀区金沙江路 12 弄",
				"tag": "设计二所"

			}, {
				"date": "2016-05-03",
				"name": "张晓明",
				"phone": "18852067999",
				"address": "上海市普陀区金沙江路 13 弄",
				"tag": "南京小组"

			}, {
				"date": "2016-05-04",
				"name": "李米中",
				"phone": "18852067999",
				"address": "上海市普陀区金沙江路 14 弄",
				"tag": "设计一所"

			}, {
				"date": "2016-05-05",
				"name": "向飒飒",
				"phone": "18852067999",
				"address": "上海市普陀区金沙江路 15 弄",
				"tag": "南京小组"

			}, {
				"date": "2016-05-06",
				"name": "王小虎",
				"phone": "18852067999",
				"address": "上海市普陀区金沙江路 16 弄",
				"tag": "设计三所"

			},
			{
				"date": "2016-05-07",
				"name": "张晓明",
				"phone": "18852067999",
				"address": "上海市普陀区金沙江路 17 弄",
				"tag": "设计二所"

			}, {
				"date": "2016-05-08",
				"name": "李米中",
				"phone": "18852067999",
				"address": "上海市普陀区金沙江路 18 弄",
				"tag": "南京小组"

			}, {
				"date": "2016-05-09",
				"name": "向飒飒",
				"phone": "18852067999",
				"address": "上海市普陀区金沙江路 19 弄",
				"tag": "设计一所"

			}, {
				"date": "2016-05-10",
				"name": "王小虎",
				"phone": "18852067999",
				"address": "上海市普陀区金沙江路 20 弄",
				"tag": "设计三所"

			},
			{
				"date": "2016-05-11",
				"name": "张晓明",
				"phone": "18852067999",
				"address": "上海市普陀区金沙江路 21 弄",
				"tag": "设计三所"

			}, {
				"date": "2016-05-12",
				"name": "李米中",
				"phone": "18852067999",
				"address": "上海市普陀区金沙江路 22 弄",
				"tag": "设计二所"

			}, {
				"date": "2016-05-13",
				"name": "向飒飒",
				"phone": "18852067999",
				"address": "上海市普陀区金沙江路 23 弄",
				"tag": "南京小组"

			}, {
				"date": "2016-05-14",
				"name": "王小虎",
				"phone": "18852067999",
				"address": "上海市普陀区金沙江路 24 弄",
				"tag": "设计一所"

			}, {
				"date": "2016-05-15",
				"name": "王小虎",
				"phone": "18852067999",
				"address": "上海市普陀区金沙江路 25 弄",
				"tag": "设计二所"

			}
		]
	},
	{
		"sectorData": [{
				"itemid": 10001,
				"text": "设计一所",
				"value": "设计一所"
			}, {
				"itemid": 10002,
				"text": "设计二所",
				"value": "设计二所"
			},
			{
				"itemid": 10003,
				"text": "设计三所",
				"value": "设计三所"
			},
			{
				"itemid": 10004,
				"text": "南京小组",
				"value": "南京小组"
			}
		]
	}
]

代码中使用的框架有：

vue链接：vue

elementUI链接：elementUI

axios.js链接：axios.min.js

主要的难点的简单讲解：

（1）在el-table中通过设置 type="expand" 和 Scoped slot 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。然后在表格的最后一列设置两个按钮，但是两个按钮要根据 v-if="scope.row.isSet"来进行“编辑和确定”的切换。

（2）在每条数据中设置一个isExpand="false"的属性，默认该行为未展开状态，当展开或关闭该行时，记录下该状态，如下：

/* 更改每一行的张开/关闭状态 */
            expandChange(row, expandedRows) {
                    row.isExpand = !row.isExpand;
            },

（3）在点击编辑按钮时，对其他行进行验证，如其他行存在编辑状态，则先保存对其他行的编辑，然后才能对该行进行编辑；点击改变某条数据变为可编辑状态，确认时，对数据进行非空校验。如下：

/* 开启编辑单元格 */
                handleEdit(index, row, e) {
                    for (const i of this.tableData) {
                        if (!i.isSet) {
                            return this.$message.warning('请先保存当前编辑项');
                        }
                    }
                    if (!row.isExpand) {
                        //调用,table的方法,展开/折叠 行
                        this.$refs.refTable.toggleRowExpansion(row);
                    }
                    row.isSet = false;

         },
        /* 保存单元格，进行编辑验证 */
                saveEdit(index, row, column) {
                    // console.log(row);
                    if ((row.address.replace(/\s+/g, '') == '' || (row.phone.replace(/\s+/g, '') == ''))) {
                        row.isSet = false;
                        return this.$message.error('数据不能为空');
                    } else {
                        row.isSet = true;
                    }
                    //调用,table的方法,展开/折叠 行
                    this.$refs.refTable.toggleRowExpansion(row);
                },

 （4）分页展示的核心代码是在获取的数据后，写入到el-table中，如下红色部分：

<el-table ref="refTable" height="500" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                         style="width: 100%" @expand-change="expandChange">

/* 分页方法 */
                handleSizeChange(val) {
                    // console.log(`每页 ${val} 条`);
                    this.pagesize = val;
                },
                handleCurrentChange: function(val) {
                    // console.log(`当前页: ${val}`);
                    this.currentPage = val;
                },

（5） 此案例中是对姓名中的关键字进行搜索，对字符串使用indexOf属性，对搜索到的数据添加到一个新的数组中，并返回给el-table；在筛选中，是element中的，可去案例中参考。如下：

<el-table-column prop="tag" label="部门" width="140" :filters="sectorData" :filter-method="filterTag">
                       <template slot-scope="scope">
                                    <el-tag size="medium" disable-transitions>{{scope.row.tag}}</el-tag>
                        </template>
        </el-table-column>

<template slot="header" slot-scope="scope">
               <el-input clearable v-model="search" prefix-icon="el-icon-search" size="mini" placeholder="输入姓名关键字搜索" @input="searchName" />
         </template>

/* 部门筛选 */
                filterTag(value, row, column) {
                    console.log(value);
                    // console.log(row);
                    return row.tag === value;
                },

/* 姓名关键字搜索 */
                searchName(search) {
                    var newList = [];
                    // console.log(search);
                    if (search != '') {
                        vm.oldtableData.forEach(item => {
                            if (item.name.indexOf(search) != -1) {
                                //空字符串包含在所有字符串中，因此控制会返回所有列表
                                newList.push(item);
                            }
                        });
                        return this.tableData = newList;
                    } else {
                        return this.tableData = this.oldtableData;
                    }
                },

（6）下面就是对保存和提交的简单校验，在提交时要确认数据已经保存，保存的数据不可再编辑

/* 提交表单 */
                postForm() {
                    if (!this.btnDisabled) {
                        return this.$message.error('请先保存');
                    } else {
                        this.$confirm('是否提交?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then((action) => {
                            this.$message({
                                type: 'success',
                                message: '提交成功!',

                            });
                            if (action === 'confirm') {
                                //提交表单
                                console.log(this.tableData);
                            }
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消提交!'
                            });
                        });
                    }
                },
                /* 保存表单 */
                saveForm() {
                    for (var i = 0; i < this.tableData.length; i++) {
                        if (!this.tableData[i].isSet) {
                            this.$message.warning('请先保存当前编辑项');
                            return this.btnDisabled = false;
                        } else {
                            this.btnDisabled = true;
                        }
                    }
                },
                /* 撤回保存 */
                backtrack() {
                    this.btnDisabled = false;
                },

 这次vue小实例就写到这，如果内容、代码有不妥的地方，望斧正，谢谢。

徐小硕
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
vue+element-ui+mybatis-plus+springboot实现分页查询功能
S_duxiu的博客
12-20 1808
一、准备 利用代码生成器，生成User相关文件 userMapper.xml userService userServiceImpl UserController 创建对应查询视图对象（package：vo） userVO：属性为提供的可查询的条件 二、为UserMapper添加查询方法 IPage<User> findUserPage(Page<User> page,@Param(Constants.WRAPPER) QueryWrapper<User> wrapp
基于tp5的vue+element-ui 实现分页
04-10
在本项目中，我们主要探讨如何使用`ThinkPHP5 (TP5)`框架，结合前端的`Vue.js`和`Element UI`组件库来实现数据的分页显示。`ThinkPHP5`是一个流行的PHP开发框架，它提供了丰富的MVC功能，方便开发者快速构建Web应用...
Vue+Element-ui实例_可编辑表格和分页（2）改进版
徐小硕—心之所向，素履以往
11-13 369
本篇文章是对上一篇《Vue.js_实例_可编辑表格和分页》的改进版 改进处： （1）对某一行的编辑时，设置背景颜色提醒，
Vue 可编辑表格：让数据编辑更舒适自如
最新发布
2401_83384536的博客
06-25 835
el-table>的属性配置基本都可以在中使用，所以只要会使用el-table[6]对于就可以立即使用。我尝试了【带斑马纹表格】、【带边框表格】、【带状态表格】、【固定表头】、【固定列】、【流体高度】等，其他的表格大家可以自行尝试哦！
使用vue+element-ui进行简单前端开发
weixin_47195668的博客
12-20 1238
是从vue安装到实现一个简单的前端项目的简单步骤
Vue+Element-UI入门
qq_45660133的博客
12-05 5446
1.2 Vue 3.0 根据下面图片选择配置：空格是选择，回车是确认！！ 2 导入插件 2.1 Element-UI 插件 在main.js 里面引用element-ui 组件 2.2 Axios 2.2.1 简单 创建utils文件在api里面封装自己需要 get post put delete请求 2.2.2 封装 创建utils文件夹 request.js 创建api文件夹 login.js data为post请求的携带信息 params是get请求携带的参数 2.3 Vuex 状态管理模式
【vue后台管理系统】基于Vue+Element-UI+ECharts开发通用管理后台（下）
十八岁讨厌编程的博客
02-18 2029
本文涉及面包屑导航的制作、用户管理页面、ES6的解构赋值等内容。
分享项目 - Vue3 + TS + element-ui-plus 项目 -- Table表格表单
世界和我们都不该止步于此
02-21 3409
今天看一个 ts 项目的 table 模块，亲身体验这是公司后台管理系统一定会使用到的，也是最常使用到的，这个项目对新手很友好，毕竟是一个相对来说比较空的项目模板，对于我来说就是一个学习的记录，一些技术的分享，手把手告知新手别人的代码怎么读，甚至还能帮该开源项目作者获取一些热度,我很乐于做这样的事情（已经争得原作者许可，感谢 🤓）项目地址：V3 Admin Vite通过该文章可以学习到 ：我们来看一下具体代码是怎么实现的,我读别人的代码喜欢先看一下大体目录结构、然后从页面功能入手，然后在 html 中找到
vue+element-ui实现分页查询
zz18532164242的博客
04-04 8974
1.前端代码 table标签 <el-table height="75%" ref="multipleTable" :data="wfxw" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-...
整理vue + element-ui常用的功能及代码片段
青梅SEO
08-11 614
目录： 1 常用表头搜索：input+select+daterange 2 表格中对【上下架】、【排序】、【选择】进行编辑 3 使用vue-clipboard2实现复制链接的功能 4 使用vue-quill-editor实现富文本编辑 5 解决el-input类型为 type=’number’ 不显示上下箭头 6 解决当el-select选中值绑定为对象时处理 7 使用u...
vue+element-ui el-table组件二次封装（2024-01-31 TTabel组件新增单击编辑单元格功能）
热门推荐
wocwin的博客
02-24 1万+
vue+element-ui的table组件二次封装（ TTable组件新增文档某列插槽渲染示例；新增所有功能动态效果图；TTable组件自定义表头弃用Table-column render-header属性改用插槽）TTable组件单元格编辑新增继承第三方组件事件传参；TTable组件按钮操作集成按钮权限 TTable组件单元格编辑新增el-form表单规则校验并增加错误提示；TTable组件实现虚拟滚动，解决数据量大页面卡顿问题;开启列设置时动态默认显示隐藏列
vue+Element-ui实现分页效果实例代码详解
10-17
Vue.js是一个轻量级的前端框架，它结合Element UI库可以轻松实现高效的分页效果。Element UI提供了丰富的组件，其中包括`Pagination`分页组件，使得开发者能够快速实现美观且功能完善的分页功能。 在Vue+Element UI...
vue+element-ui+ajax实现一个表格的实例
08-27
在本篇文章中，我们将学习如何使用Vue.js、Element-UI和Ajax来实现一个表格实例。这个实例具有很好的参考价值，对大家有所帮助。 知识点1: Vue.js概述 Vue.js是一个渐进式JavaScript框架，用于构建用户界面和单页...
vue+Element-ui实现分页效果
01-21
本文实例为大家分享了vue+Element-ui实现分页效果的具体代码，供大家参考，具体内容如下 当我们向后台请求大量数据的时候，并要在页面展示出来，请求的数据可能上百条数据或者更多的时候，并不想在一个页面展示，这...
Vue+Element-ui实例_使用flexslider插件设计横向时间线
徐小硕—心之所向，素履以往
01-04 9733
下面是做了一个类似时间线(history事件线)的页面，主要是记录一下log，或者history的操作记录。 主要难点： （1）一般的插件时间线例如(elementUI中的el-timeline)就是纵向的时间线，如果数据过多的话，就会形成很长一段的下拉样式。 （2）最主要的就是CSS样式调节，（这个真的是头发） （3）个人审美的不同，反正我做了好几个版本样式，每个人都有自己不同的喜好。 效果图如下： ...
Vue+Element-ui实例_el-checkbox二级复选框
徐小硕—心之所向，素履以往
01-06 4609
想必大家在很多时候都会碰到多级复选框的情况吧，下面这篇文章介绍了vue结合el-checkbox组件，编写的一个二级复选框案例（多级也可以根据此案例仿写）。 主要难点： （1）多次使用v-for循环，把需要展示的复选框按照，一级——二级的样式展现出来。 （2）当一级复选框选中时，二级复选框全选，当二级复选框非全选时，一级复选项为不选中状态，当二级复选框为全选时，一级复选框为选中状态。 （3）全部全选，和全部取消选中。 （4）记录选中的二级复选框id，方便后续操作。 效果图如下： 下面是
Vue+Element-ui实例_el-table可选列（字段）导出Excel
徐小硕—心之所向，素履以往
05-07 3985
不知道小伙伴们有没有遇到过table表格导出Excel时，领导说“我不想全部导出，能不能选择我想导出的列（字段）”，心里嘀咕“你不能用Excel去操作嘛”，好叭，还是我来吧，下面这篇文章就简单的介绍了如何对el-table表格进行选择列（字段）的导出，进行了组件的封装处理，希望大家喜欢，如有纰漏望指正，谢谢 主要需要解决的问题： （1）怎么样对展示的table表格进行选择列（字段）的处理 （2）v-if和v-show的不同处理 （3）如何进行组件封装 效果图如下： 下面是代码部分：
Vue+Element-ui实例_评测表单
徐小硕—心之所向，素履以往
08-12 2001
下面做了一个公司内部的评测表单页面，用于给公司内部人员打分，和写一些意见或建议。 其中难点： （1）如何在固有elementUI框架中的table组件中，插入自己需要的组件，比如input。让table组件不仅仅是展示数据，还能写入数据。 （2）如何利用v-for循环，首先把后台传来的，被评测人和对应的问题，写入table组件中。 （3）如何再次利用v-for循环，把和问题对应的input组件循环到table组件中，比如分数使用el-input-number、意见或建议使用el-input。 效果
用vue和element-ui写一个后台管理系统
02-15
在使用 Vue 和 Element-UI 来写后台管理系统时，首先你需要安装它们。你可以在命令行中使用以下命令来完成安装： ``` npm install vue npm install element-ui ``` 然后，你可以创建一个 Vue 实例，并在其中引入 Element-UI： ``` import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) new Vue({ el: '#app', ... }) ``` 接下来，你可以开始使用 Element-UI 组件来构建你的后台管理系统。 例如，你可以使用 Element-UI 的表格组件（`el-table`）和分页组件（`el-pagination`）来展示数据，并使用表单组件（`el-form`）和对话框组件（`el-dialog`）来实现数据的添加、编辑和删除等功能。 总的来说，使用 Vue 和 Element-UI 开发后台管理系统是一件非常容易的事情，并且它们提供了丰富的组件和功能，帮助你快速构建出功能丰富、友好的后台管理系统。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值