表格-多层级表头-带分页-带文字提示-带弹框
表格-多层级表头-带分页-带文字提示-带弹框
图例
格式
1、按钮-带弹框
结果汇总列表
确认评价结果
确定最终报告
数据
data() {
return {
dialogVisibleQ: false,
};
},
//可不要
methods: {
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
}
}
2、表格
结果汇总列表
确认评价结果
确定最终报告
// fixed="left" 固定列和表头,默认为左
{
{scope.row.nameA}}
评分(必填)
评分理由
数据
data() {
return {
// 表格
tableData: [
{
count: "1",
grade: "5",
nameA: "4.78",
nameB: "4.78",
nameC: "4.78",
nameD: "4.78",
nameE: "4.78",
nameF: "4.78",
nameG: "4.78",
nameH: "4.78",
countA: "18.6",
countB: "18.6",
countC: "18.6",
countD: "18.6",
countE: "18.6",
gradeA: "3.69",
gradeB: "3.69",
gradeC: "3.69",
gradeD: "3.69",
date: "基础一部",
name: "一、合性指标-1",
fraction: "142",
fractionA: "6.82",
fractionB: "5.69",
address: "唐僧",
},
{
count: "2",
grade: "7",
nameA: "4.78",
nameB: "4.78",
nameC: "4.78",
nameD: "4.78",
nameE: "4.78",
nameF: "4.78",
nameG: "4.78",
nameH: "4.78",
countA: "18.6",
countB: "18.6",
countC: "18.6",
countD: "18.6",
countE: "18.6",
gradeA: "3.69",
gradeB: "3.69",
gradeC: "3.69",
gradeD: "3.69",
date: "移动部",
name: "一、合性指标-2",
fraction: "2545",
fractionA: "6.82",
fractionB: "5.69",
address: "孙悟空",
},
{
count: "3",
grade: "552",
nameA: "4.78",
nameB: "4.78",
nameC: "4.78",
nameD: "4.78",
nameE: "4.78",
nameF: "4.78",
nameG: "4.78",
nameH: "4.78",
countA: "18.6",
countB: "18.6",
countC: "18.6",
countD: "18.6",
countE: "18.6",
gradeA: "3.69",
gradeB: "3.69",
gradeC: "3.69",
gradeD: "3.69",
date: "财务部",
name: "一、合性指标-3",
fraction: "38787",
fractionA: "6.82",
fractionB: "5.69",
address: "猪八戒",
},
{
count: "4",
grade: "25",
nameA: "4.78",
nameB: "4.78",
nameC: "4.78",
nameD: "4.78",
nameE: "4.78",
nameF: "4.78",
nameG: "4.78",
nameH: "4.78",
countA: "18.6",
countB: "18.6",
countC: "18.6",
countD: "18.6",
countE: "18.6",
gradeA: "3.69",
gradeB: "3.69",
gradeC: "3.69",
gradeD: "3.69",
date: "总裁办",
name: "一、合性指标-5",
fraction: "443",
fractionA: "6.82",
fractionB: "5.69",
address: "沙僧",
},
{
count: "5",
grade: "555",
nameA: "4.78",
nameB: "4.78",
nameC: "4.78",
nameD: "4.78",
nameE: "4.78",
nameF: "4.78",
nameG: "4.78",
nameH: "4.78",
countA: "18.6",
countB: "18.6",
countC: "18.6",
countD: "18.6",
countE: "18.6",
gradeA: "3.69",
gradeB: "3.69",
gradeC: "3.69",
gradeD: "3.69",
date: "移动部",
name: "一、合性指标-6",
fraction: "5543",
fractionA: "6.82",
fractionB: "5.69",
address: "小白龙",
},
{
count: "6",
grade: "55",
nameA: "4.78",
nameB: "4.78",
nameC: "4.78",
nameD: "4.78",
nameE: "4.78",
nameF: "4.78",
nameG: "4.78",
nameH: "4.78",
countA: "18.6",
countB: "18.6",
countC: "18.6",
countD: "18.6",
countE: "18.6",
gradeA: "3.69",
gradeB: "3.69",
gradeC: "3.69",
gradeD: "3.69",
date: "2016-05-04",
name: "已提交",
fraction: "676",
fractionA: "6.82",
fractionB: "5.69",
address: "如来",
},
],
// 分页
pagesize: 5,
currentPage: 1,
};
},
方法
methods: {
// 分页
handleCurrentChange(val) {
this.currentPage = val;
},
handleClick(row) {
console.log(row);
},
//弹框
// handleClose(done) {
// this.$confirm("确认关闭？")
// .then((_) => {
// done();
// })
// .catch((_) => {});
// },
},
样式
.a {
display: inline-block;
height: 24px;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 1);
line-height: 24px;
margin-top: 12px;
margin-bottom: 24px;
font-weight: 700;
}
.a-a {
display: inline-block;
width: 100px;
float: right;
margin-right: 25px;
margin-top: -40px;
}
/deep/.el-table th,
.el-table tr {
background: rgba(244, 245, 247, 1);
}
.pag {
margin-top: 24px;
}
//分页靠右
.el-pagination {
float: right;
}
.cor {
//小手指示
cursor: pointer;
}