devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：笔触狂放9 | 2024-02-18 01:12:31

赞

踩

element ui 表格页例子

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

主要难点：

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

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

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

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

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

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

效果图如下：

效果图（1）
概览

效果图（2）

效果图（3）

效果图（4）

效果视频如下：

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

下面是代码部分：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>可编辑表格</title>
  6. 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  7. 		<script src="../vue/vue.min.js" type="text/javascript" charset="utf-8"></script>
  8. 		<script src="../elementUI/index.js" type="text/javascript" charset="utf-8"></script>
  9. 		<script src="../vue/axios.min.js" type="text/javascript" charset="utf-8"></script>
  10. 		<link rel="stylesheet" type="text/css" href="../elementUI/index.css" />
  11. 		<style type="text/css">
  12. 			.menu {
  13. 				width: 100%;
  14. 				height: 100%;
  15. 			}
  16.  
  17. 			.container_table {
  18. 				width: 100%;
  19. 			}
  20.  
  21. 			.el-table .cell {
  22. 				text-align: center;
  23. 			}
  24.  
  25. 			.postForm {
  26. 				width: 340px;
  27. 				height: 40px;
  28. 				float: right;
  29. 				margin-top: -40px;
  30. 			}
  31.  
  32. 			/* 展开的form样式 */
  33. 			.demo-table-expand label {
  34. 				width: 90px;
  35. 				color: #99a9bf;
  36. 			}
  37.  
  38. 			.el-form--label-left .el-form-item__label {
  39. 				text-align: right;
  40. 			}
  41.  
  42. 			.demo-table-expand .el-form-item {
  43. 				margin-right: 0;
  44. 				margin-bottom: 0;
  45. 				width: 30%;
  46. 			}
  47.  
  48. 			.container_table .fy {
  49. 				margin-top: 20px;
  50. 			}
  51. 		</style>
  52. 	</head>
  53. 	<body>
  54. 		<div id="menu" class="menu">
  55. 			<el-container>
  56. 				<div class="container_table">
  57. 					<el-form :model="tableData" @submit.native.prevent>
  58. 						<el-table ref="refTable" height="500" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
  59. 						 style="width: 100%" @expand-change="expandChange">
  60. 							<el-table-column type="expand">
  61. 								<template slot-scope="props">
  62. 									<el-form label-position="left" inline class="demo-table-expand">
  63. 										<el-form-item label="日期">
  64. 											<span>{{ props.row.date }}</span>
  65. 										</el-form-item>
  66. 										<el-form-item label="姓名">
  67. 											<span>{{ props.row.name }}</span>
  68. 										</el-form-item>
  69. 										<el-form-item label="手机号">
  70. 											<span v-if="props.row.isSet">{{props.row.phone}}</span>
  71. 											<span v-else>
  72. 												<el-input clearable v-model="props.row.phone"></el-input>
  73. 											</span>
  74. 										</el-form-item>
  75. 										<el-form-item label="地址">
  76. 											<span v-if="props.row.isSet">{{props.row.address}}</span>
  77. 											<span v-else>
  78. 												<el-input type="textarea" clearable autosize v-model="props.row.address"></el-input>
  79. 											</span>
  80. 										</el-form-item>
  81. 										<el-form-item label="部门">
  82. 											<span>{{ props.row.tag }}</span>
  83. 										</el-form-item>
  84. 									</el-form>
  85. 								</template>
  86. 							</el-table-column>
  87. 							<el-table-column prop="date" label="日期" sortable width="120" column-key="date">
  88. 							</el-table-column>
  89. 							<el-table-column prop="name" label="姓名">
  90. 							</el-table-column>
  91. 							<el-table-column prop="phone" label="手机号">
  92. 							</el-table-column>
  93. 							<el-table-column prop="address" label="地址">
  94. 							</el-table-column>
  95. 							<el-table-column prop="tag" label="部门" width="140" :filters="sectorData" :filter-method="filterTag">
  96. 								<template slot-scope="scope">
  97. 									<el-tag size="medium" disable-transitions>{{scope.row.tag}}</el-tag>
  98. 								</template>
  99. 							</el-table-column>
  100. 							<el-table-column prop="searchInfo" width="200">
  101. 								<template slot="header" slot-scope="scope">
  102. 									<el-input clearable v-model="search" prefix-icon="el-icon-search" size="mini" placeholder="输入姓名关键字搜索" @input="searchName" />
  103. 								</template>
  104. 								<template slot-scope="scope">
  105. 									<el-button :disabled="btnDisabled" plain icon="el-icon-edit" v-if="scope.row.isSet" @click="handleEdit(scope.$index, scope.row)"
  106. 									 size="mini">编辑</el-button>
  107. 									<el-button plain v-else @click="saveEdit(scope.$index, scope.row)" size="mini">确定</el-button>
  108.  
  109. 								</template>
  110. 							</el-table-column>
  111. 						</el-table>
  112. 					</el-form>
  113. 					<el-pagination class="fy" :current-page="currentPage" :page-sizes="[5, 10, 20]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
  114. 					 @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="tableData.length" background>
  115. 					</el-pagination>
  116. 					<div class="postForm">
  117. 						<el-button icon="el-icon-finished" type="primary" @click="postForm">提交</el-button>
  118. 						<el-button icon="el-icon-check" type="success" @click="saveForm">保存</el-button>
  119. 						<el-button icon="el-icon-back" type="info" @click="backtrack">撤回</el-button>
  120. 					</div>
  121. 				</div>
  122. 			</el-container>
  123. 		</div>
  124. 	</body>
  125. 	<script type="text/javascript">
  126. 		var vm = new Vue({
  127. 			el: '#menu',
  128. 			data() {
  129. 				return {
  130. 					/* 表格数据 */
  131. 					tableData: [],
  132. 					/* 原始表格数据 */
  133. 					oldtableData: [],
  134. 					/* 部门数据 */
  135. 					sectorData: [],
  136. 					pagesize: 5, //每页的数据条数
  137. 					currentPage: 1, //默认开始页面
  138. 					search: '', //搜索关键字
  139. 					btnDisabled: false,
  140. 				};
  141. 			},
  142. 			methods: {
  143. 				/* 部门筛选 */
  144. 				filterTag(value, row, column) {
  145. 					console.log(value);
  146. 					// console.log(row);
  147. 					return row.tag === value;
  148. 				},
  149. 				/* 分页方法 */
  150. 				handleSizeChange(val) {
  151. 					// console.log(`每页 ${val} 条`);
  152. 					this.pagesize = val;
  153. 				},
  154. 				handleCurrentChange: function(val) {
  155. 					// console.log(`当前页: ${val}`);
  156. 					this.currentPage = val;
  157. 				},
  158. 				/* 姓名关键字搜索 */
  159. 				searchName(search) {
  160. 					var newList = [];
  161. 					// console.log(search);
  162. 					if (search != '') {
  163. 						vm.oldtableData.forEach(item => {
  164. 							if (item.name.indexOf(search) != -1) {
  165. 								//空字符串包含在所有字符串中，因此控制会返回所有列表
  166. 								newList.push(item);
  167. 							}
  168. 						});
  169. 						return this.tableData = newList;
  170. 					} else {
  171. 						return this.tableData = this.oldtableData;
  172. 					}
  173.  
  174. 				},
  175. 				/* 更改每一行的张开/关闭状态 */
  176. 				expandChange(row, expandedRows) {
  177. 					row.isExpand = !row.isExpand;
  178. 				},
  179. 				/* 开启编辑单元格 */
  180. 				handleEdit(index, row, e) {
  181. 					for (const i of this.tableData) {
  182. 						if (!i.isSet) {
  183. 							return this.$message.warning('请先保存当前编辑项');
  184. 						}
  185. 					}
  186. 					if (!row.isExpand) {
  187. 						//调用,table的方法,展开/折叠 行
  188. 						this.$refs.refTable.toggleRowExpansion(row);
  189. 					}
  190. 					row.isSet = false;
  191.  
  192. 				},
  193. 				/* 保存单元格，进行编辑验证 */
  194. 				saveEdit(index, row, column) {
  195. 					// console.log(row);
  196. 					if ((row.address.replace(/\s+/g, '') == '' || (row.phone.replace(/\s+/g, '') == ''))) {
  197. 						row.isSet = false;
  198. 						return this.$message.error('数据不能为空');
  199. 					} else {
  200. 						row.isSet = true;
  201. 					}
  202. 					//调用,table的方法,展开/折叠 行
  203. 					this.$refs.refTable.toggleRowExpansion(row);
  204. 				},
  205. 				/* 提交表单 */
  206. 				postForm() {
  207. 					if (!this.btnDisabled) {
  208. 						return this.$message.error('请先保存');
  209. 					} else {
  210. 						this.$confirm('是否提交?', '提示', {
  211. 							confirmButtonText: '确定',
  212. 							cancelButtonText: '取消',
  213. 							type: 'warning'
  214. 						}).then((action) => {
  215. 							this.$message({
  216. 								type: 'success',
  217. 								message: '提交成功!',
  218.  
  219. 							});
  220. 							if (action === 'confirm') {
  221. 								//提交表单
  222. 								console.log(this.tableData);
  223. 							}
  224. 						}).catch(() => {
  225. 							this.$message({
  226. 								type: 'info',
  227. 								message: '已取消提交!'
  228. 							});
  229. 						});
  230. 					}
  231. 				},
  232. 				/* 保存表单 */
  233. 				saveForm() {
  234. 					for (var i = 0; i < this.tableData.length; i++) {
  235. 						if (!this.tableData[i].isSet) {
  236. 							this.$message.warning('请先保存当前编辑项');
  237. 							return this.btnDisabled = false;
  238. 						} else {
  239. 							this.btnDisabled = true;
  240. 						}
  241. 					}
  242. 				},
  243. 				/* 撤回保存 */
  244. 				backtrack() {
  245. 					this.btnDisabled = false;
  246. 				},
  247. 				/* 获取内容数据 */
  248. 				getTableData() {
  249. 					axios.get('../data/tableData.json', {})
  250. 						.then(function(res) {
  251. 							for (var i = 0; i < res.data[0].tableData.length; i++) {
  252. 								// 添加单元格是否可以编辑的属性值
  253. 								res.data[0].tableData[i].isSet = true;
  254. 								// 添加行是否展开的属性值
  255. 								res.data[0].tableData[i].isExpand = false;
  256. 							}
  257. 							console.log(res.data);
  258. 							// 赋值
  259. 							vm.tableData = res.data[0].tableData;
  260. 							vm.oldtableData = res.data[0].tableData;
  261. 							vm.sectorData = res.data[1].sectorData;
  262. 						}).catch(function(error) {
  263. 							console.log(error);
  264. 						});
  265. 				}
  266. 			},
  267. 			mounted() {
  268. 				// 获取内容数据
  269. 				this.getTableData();
  270. 			}
  271.  
  272. 		});
  273. 	</script>
  274. </html>

data数据如下：

  1. [{
  2. 		"tableData": [{
  3. 				"date": "2016-05-01",
  4. 				"name": "张晓明",
  5. 				"phone": "18852067999",
  6. 				"address": "上海市普陀区金沙江路 11 弄",
  7. 				"tag": "设计三所"
  8.  
  9. 			}, {
  10. 				"date": "2016-05-02",
  11. 				"name": "李米中",
  12. 				"phone": "18852067999",
  13. 				"address": "上海市普陀区金沙江路 12 弄",
  14. 				"tag": "设计二所"
  15.  
  16. 			}, {
  17. 				"date": "2016-05-03",
  18. 				"name": "张晓明",
  19. 				"phone": "18852067999",
  20. 				"address": "上海市普陀区金沙江路 13 弄",
  21. 				"tag": "南京小组"
  22.  
  23. 			}, {
  24. 				"date": "2016-05-04",
  25. 				"name": "李米中",
  26. 				"phone": "18852067999",
  27. 				"address": "上海市普陀区金沙江路 14 弄",
  28. 				"tag": "设计一所"
  29.  
  30. 			}, {
  31. 				"date": "2016-05-05",
  32. 				"name": "向飒飒",
  33. 				"phone": "18852067999",
  34. 				"address": "上海市普陀区金沙江路 15 弄",
  35. 				"tag": "南京小组"
  36.  
  37. 			}, {
  38. 				"date": "2016-05-06",
  39. 				"name": "王小虎",
  40. 				"phone": "18852067999",
  41. 				"address": "上海市普陀区金沙江路 16 弄",
  42. 				"tag": "设计三所"
  43.  
  44. 			},
  45. 			{
  46. 				"date": "2016-05-07",
  47. 				"name": "张晓明",
  48. 				"phone": "18852067999",
  49. 				"address": "上海市普陀区金沙江路 17 弄",
  50. 				"tag": "设计二所"
  51.  
  52. 			}, {
  53. 				"date": "2016-05-08",
  54. 				"name": "李米中",
  55. 				"phone": "18852067999",
  56. 				"address": "上海市普陀区金沙江路 18 弄",
  57. 				"tag": "南京小组"
  58.  
  59. 			}, {
  60. 				"date": "2016-05-09",
  61. 				"name": "向飒飒",
  62. 				"phone": "18852067999",
  63. 				"address": "上海市普陀区金沙江路 19 弄",
  64. 				"tag": "设计一所"
  65.  
  66. 			}, {
  67. 				"date": "2016-05-10",
  68. 				"name": "王小虎",
  69. 				"phone": "18852067999",
  70. 				"address": "上海市普陀区金沙江路 20 弄",
  71. 				"tag": "设计三所"
  72.  
  73. 			},
  74. 			{
  75. 				"date": "2016-05-11",
  76. 				"name": "张晓明",
  77. 				"phone": "18852067999",
  78. 				"address": "上海市普陀区金沙江路 21 弄",
  79. 				"tag": "设计三所"
  80.  
  81. 			}, {
  82. 				"date": "2016-05-12",
  83. 				"name": "李米中",
  84. 				"phone": "18852067999",
  85. 				"address": "上海市普陀区金沙江路 22 弄",
  86. 				"tag": "设计二所"
  87.  
  88. 			}, {
  89. 				"date": "2016-05-13",
  90. 				"name": "向飒飒",
  91. 				"phone": "18852067999",
  92. 				"address": "上海市普陀区金沙江路 23 弄",
  93. 				"tag": "南京小组"
  94.  
  95. 			}, {
  96. 				"date": "2016-05-14",
  97. 				"name": "王小虎",
  98. 				"phone": "18852067999",
  99. 				"address": "上海市普陀区金沙江路 24 弄",
  100. 				"tag": "设计一所"
  101.  
  102. 			}, {
  103. 				"date": "2016-05-15",
  104. 				"name": "王小虎",
  105. 				"phone": "18852067999",
  106. 				"address": "上海市普陀区金沙江路 25 弄",
  107. 				"tag": "设计二所"
  108.  
  109. 			}
  110. 		]
  111. 	},
  112. 	{
  113. 		"sectorData": [{
  114. 				"itemid": 10001,
  115. 				"text": "设计一所",
  116. 				"value": "设计一所"
  117. 			}, {
  118. 				"itemid": 10002,
  119. 				"text": "设计二所",
  120. 				"value": "设计二所"
  121. 			},
  122. 			{
  123. 				"itemid": 10003,
  124. 				"text": "设计三所",
  125. 				"value": "设计三所"
  126. 			},
  127. 			{
  128. 				"itemid": 10004,
  129. 				"text": "南京小组",
  130. 				"value": "南京小组"
  131. 			}
  132. 		]
  133. 	}
  134. ]

代码中使用的框架有：

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小实例就写到这，如果内容、代码有不妥的地方，望斧正，谢谢。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/103159
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号