本篇文章是对上一篇《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小实例就写到这,如果内容、代码有不妥的地方,望斧正,谢谢。