Vue+Element-ui实例_可编辑表格和分页（2）改进版

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

本篇文章是对上一篇《Vue.js_实例_可编辑表格和分页》的改进版

改进处：

（1）对某一行的编辑时，对该行设置背景颜色提醒，方便编辑者识别该行正在修改内容。

（2）只对编辑的行内容进行保存和提交，无修改内容的行进行文字提醒，无需再次提交后台，提高效率。

效果图如下：

下面是代码部分：

<!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" />
		<link rel="stylesheet" type="text/css" href="css/PerformanceTable.css" />
	<body>
		<div id="PerformanceTable">
			<el-form :model="tableData" @submit.native.prevent>
				<el-table ref="refTable" height="800" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%":row-class-name="tableRowClassName"
				 @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.user_name }}</span>
								</el-form-item>
								<el-form-item label="部门">
									<span>{{ props.row.dept_name }}</span>
								</el-form-item>
								<el-form-item label="项目组">
									<span>{{ props.row.team_name }}</span>
								</el-form-item>
								<el-form-item label="岗位职级">
									<span>{{ props.row.position_level }}</span>
								</el-form-item>
								<el-form-item label="工资属性">
									<span>{{ props.row.salary_attribute }}</span>
								</el-form-item>
								<el-form-item label="基本工资">
									<span>{{ props.row.grade_basic_salary }}</span>
								</el-form-item>
								<el-form-item label="奖金">
									<span>{{ props.row.bonus }}</span>
								</el-form-item>
								<el-form-item label="通信补贴">
									<span>{{ props.row.communication_allowance }}</span>
								</el-form-item>
								<el-form-item label="出差补贴">
									<span>{{ props.row.travel_allowance }}</span>
								</el-form-item>
								<el-form-item label="电脑补贴">
									<span>{{ props.row.computer_allowance }}</span>
								</el-form-item>
								<el-form-item label="高温补贴">
									<span>{{ props.row.high_temperature_allowance }}</span>
								</el-form-item>
								<el-form-item label="车辆补贴">
									<span>{{ props.row.vehicle_allowance }}</span>
								</el-form-item>
								<el-form-item label="特殊津贴">
									<span>{{ props.row.special_allowance }}</span>
								</el-form-item>
								<el-form-item label="请假扣除">
									<span>{{ props.row.absence_deduction }}</span>
								</el-form-item>
								<el-form-item label="绩效工资">
									<span>{{ props.row.merit_pay }}</span>
								</el-form-item>
								<el-form-item label="本月调整1">
									<span v-if="props.row.isSet">{{props.row.manual_adjustment_1}}</span>
									<span v-else>
										<el-input clearable v-model="props.row.manual_adjustment_1"></el-input>
									</span>
								</el-form-item>
								<el-form-item label="本月调整1的说明">
									<span v-if="props.row.isSet">{{props.row.manual_adjustment_1_description}}</span>
									<span v-else>
										<el-input type="textarea" clearable autosize v-model="props.row.manual_adjustment_1_description"></el-input>
									</span>
								</el-form-item>
								<el-form-item label="其他调整">
									<span>{{ props.row.other_adjustment }}</span>
								</el-form-item>
								<el-form-item label="本月调整2">
									<span v-if="props.row.isSet">{{props.row.manual_adjustment_2}}</span>
									<span v-else>
										<el-input clearable v-model="props.row.manual_adjustment_2"></el-input>
									</span>
								</el-form-item>
								<el-form-item label="本月调整2的说明">
									<span v-if="props.row.isSet">{{props.row.manual_adjustment_2_description}}</span>
									<span v-else>
										<el-input type="textarea" clearable autosize v-model="props.row.manual_adjustment_2_description"></el-input>
									</span>
								</el-form-item>
								<el-form-item label="季度奖金">
									<span>{{ props.row.quarterly_bonus }}</span>
								</el-form-item>
								<el-form-item label="年度奖金">
									<span>{{ props.row.annual_bonus }}</span>
								</el-form-item>
								<el-form-item label="应发工资">
									<span>{{ props.row.gross_pay }}</span>
								</el-form-item>
								<el-form-item label="应发合计">
									<span>{{ props.row.gross_pay_sum }}</span>
								</el-form-item>
								<el-form-item label="社保">
									<span>{{ props.row.social_insurance }}</span>
								</el-form-item>
								<el-form-item label="公积金">
									<span>{{ props.row.housing_fund }}</span>
								</el-form-item>
								<el-form-item label="税前应发">
									<span>{{ props.row.before_tax_payment }}</span>
								</el-form-item>
								<el-form-item label="个税">
									<span>{{ props.row.personal_income_tax }}</span>
								</el-form-item>
								<el-form-item label="税后实发">
									<span>{{ props.row.after_tax_payment }}</span>
								</el-form-item>
							</el-form>
						</template>
					</el-table-column>
					<el-table-column prop="user_name" label="姓名" width="100">
					</el-table-column>
					<el-table-column prop="dept_name" label="部门" width="150" :filters="sectorData" :filter-method="filterTag">
						<template slot-scope="scope">
							<el-tag size="medium" disable-transitions>{{scope.row.dept_name}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="team_name" label="项目组" width="150">
					</el-table-column>
					<el-table-column prop="position_level" label="岗位职级" width="100">
					</el-table-column>
					<el-table-column prop="salary_attribute" label="工资属性" width="120">
					</el-table-column>
					<el-table-column prop="grade_basic_salary" label="基本工资" width="80">
					</el-table-column>
					<el-table-column prop="merit_pay" label="绩效工资" width="80">
					</el-table-column>
					<el-table-column prop="gross_pay" label="应发工资" width="80">
					</el-table-column>
					<el-table-column prop="gross_pay_sum" label="应发合计" width="80">
					</el-table-column>
					<el-table-column prop="social_insurance" label="社保" width="80">
					</el-table-column>
					<el-table-column prop="housing_fund" label="公积金" width="80">
					</el-table-column>
					<el-table-column prop="personal_income_tax" label="个税" width="80">
					</el-table-column>
					<el-table-column prop="after_tax_payment" label="税后实发" width="80">
					</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" style="margin-top: -20px;">
				<el-button icon="el-icon-download" type="warning" @click="exportData">导出</el-button>
				<el-button icon="el-icon-finished" type="primary" @click="postUpdateTableDate">提交</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>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#PerformanceTable',
				data() {
					return {

						user1: {
							id: '1001',
							userId: '123456',
							name: '张三',
							deptId: '11111',
							deptName: '综合部',
							position: '主任',
						},

						btnDisabled: false,
						pagesize: 10, //每页的数据条数
						currentPage: 1, //默认开始页面
						search: '', //搜索关键字

						/* 部门数据 */
						sectorData: [],
						/* 表格数据 */
						tableData: [],
						/* 原始表格数据 */
						oldtableData: [],
						/* 开启时记录的数据 */
						openRowData: [],
						/* 需要调整的数据 */
						adjustmentData: [],
					};
				},
				methods: {

					/* 部门筛选 */
					filterTag(value, row, column) {
						console.log(value);
						// console.log(row);
						return row.dept_name === value;
					},
					/* 分页方法 */
					handleSizeChange(val) {
						// console.log('当前页'+val+'条');
						this.pagesize = val;
					},
					/*当前页改变时 */
					handleCurrentChange(val) {
						// console.log('当前第'+val+'页');
						for (const i of this.tableData) {
							i.isSet = true;
							i.isExpand = false;
						}
						this.currentPage = val;
					},
					/* 姓名关键字搜索 */
					searchName(search) {
						var newList = [];
						// console.log(search);
						if (search != '') {
							vm.oldtableData.forEach(item => {
								if (item.user_name.indexOf(search) != -1) {
									//空字符串包含在所有字符串中，因此控制会返回所有列表
									newList.push(item);
								}
							});
							return this.tableData = newList;
						} else {
							return this.tableData = this.oldtableData;
						}

					},
					/* 编辑行样式 */
					tableRowClassName({
						row,
						rowIndex
					}) {
						if (!row.isSet) {
							return 'warning-row';
						} else {
							return '';
						}
					
					},
					/* 更改每一行的张开/关闭状态 */
					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;
						// 缓存数据，进行比较是否发生改变
						this.openRowData.user_id = row.user_id;
						this.openRowData.manual_adjustment_1 = row.manual_adjustment_1;
						this.openRowData.manual_adjustment_1_description = row.manual_adjustment_1_description;
						this.openRowData.manual_adjustment_2 = row.manual_adjustment_2;
						this.openRowData.manual_adjustment_2_description = row.manual_adjustment_2_description;
						// console.log(this.openRowData);
					},
					/* 保存单元格，进行编辑验证 */
					saveEdit(index, row, column) {
						// 根据用户ID，进行数据去重，保存最后一次修改的数据
						const uniqueData = (Oarr, key) => {
							return [...new Map(Oarr.map(item => [item[key], item])).values()];
						};
						if (row.manual_adjustment_1 == this.openRowData.manual_adjustment_1 &&
							row.manual_adjustment_2 == this.openRowData.manual_adjustment_2 &&
							row.manual_adjustment_1_description == this.openRowData.manual_adjustment_1_description &&
							row.manual_adjustment_2_description == this.openRowData.manual_adjustment_2_description
						) {
							row.isSet = true;
							this.$message.warning('数据未发生改变');
						} else {
							// 暂时缓存每一条数据
							const adjustment = {
								'user_id': row.user_id,
								'manual_adjustment_1': row.manual_adjustment_1,
								'manual_adjustment_1_description': row.manual_adjustment_1_description,
								'manual_adjustment_2': row.manual_adjustment_2,
								'manual_adjustment_2_description': row.manual_adjustment_2_description,
							};
							this.adjustmentData.push(adjustment);
							row.isSet = true;
						};
						if ((row.manual_adjustment_1.replace(/\s+/g, '') == '' ||
								row.manual_adjustment_1_description.replace(/\s+/g, '') == '' ||
								row.manual_adjustment_2.replace(/\s+/g, '') == '' ||
								row.manual_adjustment_2_description.replace(/\s+/g, '') == '')) {
							row.isSet = false;
							return this.$message.error('数据不能为空');
						};
						//数据去重
						this.adjustmentData = uniqueData(this.adjustmentData, 'user_id');
						console.log(this.adjustmentData);
						//调用,table的方法,展开/折叠 行
						this.$refs.refTable.toggleRowExpansion(row);
					},
					/* 提交调整信息后的表单 */
					postUpdateTableDate() {
						if (!this.btnDisabled) {
							return this.$message.error('请先保存!');
						} else if (this.adjustmentData.length == 0) {
							return this.$message.error('暂无数据调整，无需提交！');
						} else {
							this.$confirm('是否提交?', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							}).then((action) => {
								this.$message({
									type: 'success',
									message: '提交成功!',
								});
								if (action === 'confirm') {
									//提交表单
									let performanceData = {
										'userId': '1111111',
										'name': '张三',
										'deptId': '111111',
										'deptName': '财务部',
										'position': '主任',
										'performanceTable': this.adjustmentData
									};
									console.log(performanceData);
									// 提交后重新置空
									this.adjustmentData = [];
								}
							}).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;
					},
					/* 导出表格数据 */
					exportData() {
						console.log('导出数据');
					},

					/* 获取部门数据 */
					getSectorData() {
						axios.get('data/sectorData.json', {})
							.then(function(res) {
								// console.log(res.data);
								vm.sectorData = res.data;
							}).catch(function(error) {
								console.log(error);
							});
					},
					/* 获取表格内容数据 */
					getTableData() {
						axios.get('data/Data副本.json', {})
							.then(function(res) {
								for (var i = 0; i < res.data.length; i++) {
									// 添加单元格是否可以编辑的属性值
									res.data[i].isSet = true;
									// 添加行是否展开的属性值
									res.data[i].isExpand = false;
								}
								console.log(res.data);
								// 赋值
								vm.tableData = res.data;
								vm.oldtableData = res.data;
							}).catch(function(error) {
								console.log(error);
							});
					}

				},
				mounted() {

					//获取部门数据
					this.getSectorData();
					// 获取表格内容数据
					this.getTableData();

				}
			});
		</script>
	</body>
</html>

css样式部分：

/* 操作按钮 */
.postForm {
	width: 490px;
	height: 40px;
	float: right;
	margin-top: -40px;
}

/* 展开的form样式 */
.demo-table-expand label {
	width: 130px;
	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 .fy {
	margin-top: 20px;
}

.el-table .warning-row {
	background: oldlace;
}

/* 消除hover效果 */
.el-table tbody tr:hover>td {
	background-color: rgba(0, 0, 0, 0) !important;
}

data模拟数据：

[{
		"itemid": 10001,
		"text": "设计一所",
		"value": "设计一所"
	}, {
		"itemid":10002,
		"text": "设计二所",
		"value": "设计二所"
	},
	{
		"itemid":10003,
		"text": "设计三所",
		"value": "设计三所"
	},
	{
		"itemid":10004,
		"text": "设计四所",
		"value": "设计四所"
	},
	{
		"itemid":10005,
		"text": "技术服务中心",
		"value": "技术服务中心"
	},
	{
		"itemid":10006,
		"text": "安徽项目组",
		"value": "安徽项目组"
	}
]

[{
		"user_id":10001,
		"user_name": "张晓明",
		"dept_name": "设计三所",
		"team_name": "南通移动项目组",
		"position_level": "三级A",
		"salary_attribute": "工资属性",
		"grade_basic_salary": 3000,
		"bonus": 1500,
		"communication_allowance": 100,
		"travel_allowance": 150,
		"computer_allowance": 0,
		"high_temperature_allowance": 0,
		"vehicle_allowance": 0,
		"special_allowance": 0,
		"absence_deduction": 80,
		"merit_pay": 1000,
		"quarterly_bonus": 2500,
		"annual_bonus": 10000,
		"manual_adjustment_1": "本月调整1",
		"manual_adjustment_1_description": "调整1的说明",
		"manual_adjustment_2": "本月调整2",
		"manual_adjustment_2_description": "调整2的说明",
		"gross_pay": 5000,
		"other_adjustment": "其他调整",
		"gross_pay_sum": 8000,
		"social_insurance": 300,
		"housing_fund": 200,
		"before_tax_payment": 8000,
		"personal_income_tax": 600,
		"after_tax_payment": 7000
	}, {
		"user_id":10002,
		"user_name": "张三",
		"dept_name": "设计一所",
		"team_name": "广州移动项目组",
		"position_level": "三级A",
		"salary_attribute": "工资属性",
		"grade_basic_salary": 3000,
		"bonus": 1500,
		"communication_allowance": 100,
		"travel_allowance": 150,
		"computer_allowance": 0,
		"high_temperature_allowance": 0,
		"vehicle_allowance": 0,
		"special_allowance": 0,
		"absence_deduction": 80,
		"merit_pay": 1000,
		"quarterly_bonus": 2500,
		"annual_bonus": 10000,
		"manual_adjustment_1": "本月调整1",
		"manual_adjustment_1_description": "调整1的说明",
		"manual_adjustment_2": "本月调整2",
		"manual_adjustment_2_description": "调整2的说明",
		"gross_pay": 5000,
		"other_adjustment": "其他调整",
		"gross_pay_sum": 8000,
		"social_insurance": 300,
		"housing_fund": 200,
		"before_tax_payment": 8000,
		"personal_income_tax": 600,
		"after_tax_payment": 7000

	}, {
		"user_id":10003,
		"user_name": "李四",
		"dept_name": "设计二所",
		"team_name": "丽江移动项目组",
		"position_level": "三级A",
		"salary_attribute": "工资属性",
		"grade_basic_salary": 3000,
		"bonus": 1500,
		"communication_allowance": 100,
		"travel_allowance": 150,
		"computer_allowance": 0,
		"high_temperature_allowance": 0,
		"vehicle_allowance": 0,
		"special_allowance": 0,
		"absence_deduction": 80,
		"merit_pay": 1000,
		"quarterly_bonus": 2500,
		"annual_bonus": 10000,
		"manual_adjustment_1": "本月调整1",
		"manual_adjustment_1_description": "调整1的说明",
		"manual_adjustment_2": "本月调整2",
		"manual_adjustment_2_description": "调整2的说明",
		"gross_pay": 5000,
		"other_adjustment": "其他调整",
		"gross_pay_sum": 8000,
		"social_insurance": 300,
		"housing_fund": 200,
		"before_tax_payment": 8000,
		"personal_income_tax": 600,
		"after_tax_payment": 7000

	}, {
		"user_id":10004,
		"user_name": "王五",
		"dept_name": "设计一所",
		"team_name": "惠州移动项目组",
		"position_level": "三级A",
		"salary_attribute": "工资属性",
		"grade_basic_salary": 3000,
		"bonus": 1500,
		"communication_allowance": 100,
		"travel_allowance": 150,
		"computer_allowance": 0,
		"high_temperature_allowance": 0,
		"vehicle_allowance": 0,
		"special_allowance": 0,
		"absence_deduction": 80,
		"merit_pay": 1000,
		"quarterly_bonus": 2500,
		"annual_bonus": 10000,
		"manual_adjustment_1": "本月调整1",
		"manual_adjustment_1_description": "调整1的说明",
		"manual_adjustment_2": "本月调整2",
		"manual_adjustment_2_description": "调整2的说明",
		"gross_pay": 5000,
		"other_adjustment": "其他调整",
		"gross_pay_sum": 8000,
		"social_insurance": 300,
		"housing_fund": 200,
		"before_tax_payment": 8000,
		"personal_income_tax": 600,
		"after_tax_payment": 7000
	}, {
		"user_id":10005,
		"user_name": "王二麻子",
		"dept_name": "技术服务中心",
		"team_name": "珠海小组",
		"position_level": "三级A",
		"salary_attribute": "工资属性",
		"grade_basic_salary": 3000,
		"bonus": 1500,
		"communication_allowance": 100,
		"travel_allowance": 150,
		"computer_allowance": 0,
		"high_temperature_allowance": 0,
		"vehicle_allowance": 0,
		"special_allowance": 0,
		"absence_deduction": 80,
		"merit_pay": 1000,
		"quarterly_bonus": 2500,
		"annual_bonus": 10000,
		"manual_adjustment_1": "本月调整1",
		"manual_adjustment_1_description": "调整1的说明",
		"manual_adjustment_2": "本月调整2",
		"manual_adjustment_2_description": "调整2的说明",
		"gross_pay": 5000,
		"other_adjustment": "其他调整",
		"gross_pay_sum": 8000,
		"social_insurance": 300,
		"housing_fund": 200,
		"before_tax_payment": 8000,
		"personal_income_tax": 600,
		"after_tax_payment": 7000

	},{
		"user_id":10006,
		"user_name": "张晓明",
		"dept_name": "安徽项目组",
		"team_name": "合肥移动项目组",
		"position_level": "三级A",
		"salary_attribute": "工资属性",
		"grade_basic_salary": 3000,
		"bonus": 1500,
		"communication_allowance": 100,
		"travel_allowance": 150,
		"computer_allowance": 0,
		"high_temperature_allowance": 0,
		"vehicle_allowance": 0,
		"special_allowance": 0,
		"absence_deduction": 80,
		"merit_pay": 1000,
		"quarterly_bonus": 2500,
		"annual_bonus": 10000,
		"manual_adjustment_1": "本月调整1",
		"manual_adjustment_1_description": "调整1的说明",
		"manual_adjustment_2": "本月调整2",
		"manual_adjustment_2_description": "调整2的说明",
		"gross_pay": 5000,
		"other_adjustment": "其他调整",
		"gross_pay_sum": 8000,
		"social_insurance": 300,
		"housing_fund": 200,
		"before_tax_payment": 8000,
		"personal_income_tax": 600,
		"after_tax_payment": 7000

	}, {
		"user_id":10007,
		"user_name": "张三",
		"dept_name": "设计四所",
		"team_name": "武汉移动项目组",
		"position_level": "三级A",
		"salary_attribute": "工资属性",
		"grade_basic_salary": 3000,
		"bonus": 1500,
		"communication_allowance": 100,
		"travel_allowance": 150,
		"computer_allowance": 0,
		"high_temperature_allowance": 0,
		"vehicle_allowance": 0,
		"special_allowance": 0,
		"absence_deduction": 80,
		"merit_pay": 1000,
		"quarterly_bonus": 2500,
		"annual_bonus": 10000,
		"manual_adjustment_1": "本月调整1",
		"manual_adjustment_1_description": "调整1的说明",
		"manual_adjustment_2": "本月调整2",
		"manual_adjustment_2_description": "调整2的说明",
		"gross_pay": 5000,
		"other_adjustment": "其他调整",
		"gross_pay_sum": 8000,
		"social_insurance": 300,
		"housing_fund": 200,
		"before_tax_payment": 8000,
		"personal_income_tax": 600,
		"after_tax_payment": 7000

	},{
		"user_id":10008,
		"user_name": "张晓明",
		"dept_name": "设计三所",
		"team_name": "南通移动项目组",
		"position_level": "三级A",
		"salary_attribute": "工资属性",
		"grade_basic_salary": 3000,
		"bonus": 1500,
		"communication_allowance": 100,
		"travel_allowance": 150,
		"computer_allowance": 0,
		"high_temperature_allowance": 0,
		"vehicle_allowance": 0,
		"special_allowance": 0,
		"absence_deduction": 80,
		"merit_pay": 1000,
		"quarterly_bonus": 2500,
		"annual_bonus": 10000,
		"manual_adjustment_1": "本月调整1",
		"manual_adjustment_1_description": "调整1的说明",
		"manual_adjustment_2": "本月调整2",
		"manual_adjustment_2_description": "调整2的说明",
		"gross_pay": 5000,
		"other_adjustment": "其他调整",
		"gross_pay_sum": 8000,
		"social_insurance": 300,
		"housing_fund": 200,
		"before_tax_payment": 8000,
		"personal_income_tax": 600,
		"after_tax_payment": 7000

	}, {
		"user_id":10009,
		"user_name": "张三",
		"dept_name": "设计一所",
		"team_name": "广州移动项目组",
		"position_level": "三级A",
		"salary_attribute": "工资属性",
		"grade_basic_salary": 3000,
		"bonus": 1500,
		"communication_allowance": 100,
		"travel_allowance": 150,
		"computer_allowance": 0,
		"high_temperature_allowance": 0,
		"vehicle_allowance": 0,
		"special_allowance": 0,
		"absence_deduction": 80,
		"merit_pay": 1000,
		"quarterly_bonus": 2500,
		"annual_bonus": 10000,
		"manual_adjustment_1": "本月调整1",
		"manual_adjustment_1_description": "调整1的说明",
		"manual_adjustment_2": "本月调整2",
		"manual_adjustment_2_description": "调整2的说明",
		"gross_pay": 5000,
		"other_adjustment": "其他调整",
		"gross_pay_sum": 8000,
		"social_insurance": 300,
		"housing_fund": 200,
		"before_tax_payment": 8000,
		"personal_income_tax": 600,
		"after_tax_payment": 7000

	}, {
		"user_id":10010,
		"user_name": "李四",
		"dept_name": "设计二所",
		"team_name": "丽江移动项目组",
		"position_level": "三级A",
		"salary_attribute": "工资属性",
		"grade_basic_salary": 3000,
		"bonus": 1500,
		"communication_allowance": 100,
		"travel_allowance": 150,
		"computer_allowance": 0,
		"high_temperature_allowance": 0,
		"vehicle_allowance": 0,
		"special_allowance": 0,
		"absence_deduction": 80,
		"merit_pay": 1000,
		"quarterly_bonus": 2500,
		"annual_bonus": 10000,
		"manual_adjustment_1": "本月调整1",
		"manual_adjustment_1_description": "调整1的说明",
		"manual_adjustment_2": "本月调整2",
		"manual_adjustment_2_description": "调整2的说明",
		"gross_pay": 5000,
		"other_adjustment": "其他调整",
		"gross_pay_sum": 8000,
		"social_insurance": 300,
		"housing_fund": 200,
		"before_tax_payment": 8000,
		"personal_income_tax": 600,
		"after_tax_payment": 7000

	}, {
		"user_id":10011,
		"user_name": "王五",
		"dept_name": "设计一所",
		"team_name": "惠州移动项目组",
		"position_level": "三级A",
		"salary_attribute": "工资属性",
		"grade_basic_salary": 3000,
		"bonus": 1500,
		"communication_allowance": 100,
		"travel_allowance": 150,
		"computer_allowance": 0,
		"high_temperature_allowance": 0,
		"vehicle_allowance": 0,
		"special_allowance": 0,
		"absence_deduction": 80,
		"merit_pay": 1000,
		"quarterly_bonus": 2500,
		"annual_bonus": 10000,
		"manual_adjustment_1": "本月调整1",
		"manual_adjustment_1_description": "调整1的说明",
		"manual_adjustment_2": "本月调整2",
		"manual_adjustment_2_description": "调整2的说明",
		"gross_pay": 5000,
		"other_adjustment": "其他调整",
		"gross_pay_sum": 8000,
		"social_insurance": 300,
		"housing_fund": 200,
		"before_tax_payment": 8000,
		"personal_income_tax": 600,
		"after_tax_payment": 7000
	}, {
		"user_id":10012,
		"user_name": "王二麻子",
		"dept_name": "技术服务中心",
		"team_name": "珠海小组",
		"position_level": "三级A",
		"salary_attribute": "工资属性",
		"grade_basic_salary": 3000,
		"bonus": 1500,
		"communication_allowance": 100,
		"travel_allowance": 150,
		"computer_allowance": 0,
		"high_temperature_allowance": 0,
		"vehicle_allowance": 0,
		"special_allowance": 0,
		"absence_deduction": 80,
		"merit_pay": 1000,
		"quarterly_bonus": 2500,
		"annual_bonus": 10000,
		"manual_adjustment_1": "本月调整1",
		"manual_adjustment_1_description": "调整1的说明",
		"manual_adjustment_2": "本月调整2",
		"manual_adjustment_2_description": "调整2的说明",
		"gross_pay": 5000,
		"other_adjustment": "其他调整",
		"gross_pay_sum": 8000,
		"social_insurance": 300,
		"housing_fund": 200,
		"before_tax_payment": 8000,
		"personal_income_tax": 600,
		"after_tax_payment": 7000

	},{
		"user_id":10013,
		"user_name": "张晓明",
		"dept_name": "安徽项目组",
		"team_name": "合肥移动项目组",
		"position_level": "三级A",
		"salary_attribute": "工资属性",
		"grade_basic_salary": 3000,
		"bonus": 1500,
		"communication_allowance": 100,
		"travel_allowance": 150,
		"computer_allowance": 0,
		"high_temperature_allowance": 0,
		"vehicle_allowance": 0,
		"special_allowance": 0,
		"absence_deduction": 80,
		"merit_pay": 1000,
		"quarterly_bonus": 2500,
		"annual_bonus": 10000,
		"manual_adjustment_1": "本月调整1",
		"manual_adjustment_1_description": "调整1的说明",
		"manual_adjustment_2": "本月调整2",
		"manual_adjustment_2_description": "调整2的说明",
		"gross_pay": 5000,
		"other_adjustment": "其他调整",
		"gross_pay_sum": 8000,
		"social_insurance": 300,
		"housing_fund": 200,
		"before_tax_payment": 8000,
		"personal_income_tax": 600,
		"after_tax_payment": 7000

	}, {
		"user_id":10014,
		"user_name": "张三",
		"dept_name": "设计四所",
		"team_name": "武汉移动项目组",
		"position_level": "三级A",
		"salary_attribute": "工资属性",
		"grade_basic_salary": 3000,
		"bonus": 1500,
		"communication_allowance": 100,
		"travel_allowance": 150,
		"computer_allowance": 0,
		"high_temperature_allowance": 0,
		"vehicle_allowance": 0,
		"special_allowance": 0,
		"absence_deduction": 80,
		"merit_pay": 1000,
		"quarterly_bonus": 2500,
		"annual_bonus": 10000,
		"manual_adjustment_1": "本月调整1",
		"manual_adjustment_1_description": "调整1的说明",
		"manual_adjustment_2": "本月调整2",
		"manual_adjustment_2_description": "调整2的说明",
		"gross_pay": 5000,
		"other_adjustment": "其他调整",
		"gross_pay_sum": 8000,
		"social_insurance": 300,
		"housing_fund": 200,
		"before_tax_payment": 8000,
		"personal_income_tax": 600,
		"after_tax_payment": 7000

	}
]

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

徐小硕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现可编辑的elementui表格
TVM的博客
10-28 741
以上为效果图 以下为代码 <el-table :data="firstTagList" stripe :header-cell-style="{ background: '#eef1f6', color: '#606266' }" @cell-click="getSecondTag" > <el-table-column header-a...
vue+element-ui实现表格编辑
热门推荐
liaoxuewu的博客
07-24 8万+
两种实现方式 1、表格内部显示和编辑切换 这种方式就是利用两个标签显示隐藏来实现，我们这里用input和span，正常用span将数据显示，点击编辑时，将span隐藏，显示input进行编辑。选中当前行我们可以通过slot-scope中的index去实现，在控制显示隐藏的属性上绑定index就可以选中当前行了，如showEdit[index]。 html中的代码： &amp;amp;amp;amp;amp;amp;lt;el...
Vue项目-Element-UI可编辑表格
StupidlyGrass的博客
04-02 2097
【代码】Vue Element-UI可编辑表格。
Vue elementui table 可编辑
lllsj的博客
10-25 280
如图:想实现如下表格编辑样式: 图1:table 加载样式(图二点击保存之后样式) 图2:table 编辑当前行样式 图3:点击+添加 table 新增空行 <el-table size="small" v-loading="loading" :height="contentHeight" ref="authgroupTa...
vue编辑页面和新增_Vue: elementUI知识点汇总02
weixin_39843431的博客
11-20 358
注:业余时间学习,以此作为笔记知识点一:通过axios拦截器添加token认证添加axios拦截器添加拦截器在请求头中添加Authorization属性将token值放入添加的属性中axios.interceptors.request.use(config => { // console.log(config) config.headers.Authorization = windo...
element ui分页怎么做_Vue+element-ui 实现表格的分页功能示例
weixin_42320061的博客
01-13 406
本文介绍了Vue+element-ui 实现表格的分页功能示例，分享给大家，具体如下：实现效果如下图所示：template部分：:data="tempList":header-cell-style="rowClass"stripeborder style="margin-bottom:14px;":empty-text="emptyText">@size-change="handleSize...
基于tp5的vue+element-ui 实现分页
04-10
在本项目中，我们主要探讨如何使用`ThinkPHP5 (TP5)`框架，结合前端的`Vue.js`和`Element UI`组件库来实现数据的分页显示。`ThinkPHP5`是一个流行的PHP开发框架，它提供了丰富的MVC功能，方便开发者快速构建Web应用...
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框架，用于构建用户界面和单页...
基于vue2 + Element-ui搭建的后台管理系统源码.zip
10-12
Vue2和Element-UI是现代前端开发中常用的两个技术栈，它们共同构建了一个高效、易用的后台管理系统。Vue2是一个轻量级的JavaScript框架，以其简洁的API和高效的响应式系统著称，而Element-UI则是一个基于Vue2的组件...
vue+Element-ui实现分页效果
01-21
本文实例为大家分享了vue+Element-ui实现分页效果的具体代码，供大家参考，具体内容如下 当我们向后台请求大量数据的时候，并要在页面展示出来，请求的数据可能上百条数据或者更多的时候，并不想在一个页面展示，这...
关于使用element -ui 页面，新增，删除，编辑，操作后动态的显示操作结果的使用总结
weixin_45932733的博客
08-10 827
关于使用element -ui 页面，新增，删除，编辑，操作后动态的显示操作结果的使用总结 其实就是对数据进行删除，与添加的操作，因为vue的数据都是双向绑定的，自己要有一方发生改变，另外一方也会随之改变。所以做完上述操作后，不用刷新页面，只要改变对应的数据，页面上的数据可以动态的随之改变，在这基础上就可以利用下面这几个对数组操作的函数。 1.indexOf（）从前往后 lastIndexOf()从后往前 这是ECMAScript 5 为数组添加的位置方法，有两个参数，一个为要查找到项，另一个为可选的
elementui制作可编辑表格行
super码力的博客
11-25 6068
elementui制作可编辑表格行，当点击某一行的编辑按钮时，单元格变成可输入的状态，点击保存之后变成纯展示状态
Vue使用ElementUI编写页面是准备的操作
隔壁的橘猫的博客
03-18 235
第一步:设置全局Css样式删除浏览器原有的样式 然后再main.js中引入 第二:使用element UI时如何让Container布局容器布满全屏 第一步; 在template中写样式时第一步加div 然后给其设置样式: 在其给container设置 ...
【Vue】Element表单做成表格样式，el-form修改表格样式
最新发布
take_it_easy_hes的博客
04-08 1077
【代码】Element表单做成表格样式，el-form修改表格样式。
表格 + 分页 +表格上编辑
weixin_44417481的博客
04-10 1012
分装分页表格分页表格的封装代码截图实现的功能分页咋弄的dataPacket是啥看下图表格编辑咋搞的我其实啥都不想写。。图片贴上就完了↑↑↑你这个东西咋用呀效果展示一下吧---好的 分页表格的封装 想要使用表格，可以！ 有各种各样的插件。。。 想要使用分页，可以！ 有各种各样的样式 想要能够分页的表格，找呀找呀找呀找，嗯，这个功能强大，哎可是太丑了；好，这个界面漂亮，哎，原来是个花架子；这个操作起来...
lumen 分页_Vue+Element UI+Lumen实现通用表格分页功能
weixin_28520495的博客
01-14 232
这篇文章主要为大家详细介绍了Vue+Element UI+Lumen实现通用表格分页功能，具有一定的参考价值，可以用来参考一下。感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！前言最近在做一个前后端分离的项目，前端使用 Vue+ Element UI，而后端则使用 Lumen 做接口开发，其中分页是必不可少的一部分，本文就介绍如何基于以上环境做一个简单、可复用的分页功能。先说后端后端做...
vue + element-ui二次封装Table组件，实现表格内容的完全自定义
qq_16139383的博客
03-20 9444
vue + element-ui二次封装Table组件，实现表格内容的完全自定义 前言 我们在用vue + element-ui写后台管理系统项目时，table组件应该是用的频率非常高的组件之一，但是我们不希望每次都使用element-ui的表格代码，秉着代码可读性和可复用性的原则，我们需要对element的table组件进行二次封装。 1、新建table.vue页面 <template&g...
基于Vue.js和Element UI框架的自定义表单Form组件
wangweiruning的博客
03-26 1414
一个基于Vue.js和Element UI框架的自定义表单Form组件。这个组件非常灵活，支持自定义类名、表单配置项、动态新增表单项、自定义事件绑定等高级功能。
Vue+Element UI 实现表格动态增删改功能
"使用Vue.js和Element UI库实现表格的新增、编辑和删除功能，常见于数据管理场景，如XML文件标签的管理。" 在Web开发中，Vue.js是一个流行的前端框架，它提供了一种声明式的数据绑定和组件化的方式，使得构建用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值