表格-多层级表头-带分页-带文字提示-带弹框
图例
格式
1、按钮-带弹框
<div>
<div class="a">结果汇总列表</div>
<div class="a-a">
<div>
<el-button style="margin-bottom:10px">确认评价结果</el-button>
</div>
<div>
<el-button type="primary" @click="dialogVisibleQ = true">确定最终报告</el-button>
<el-dialog
style="margin-top: 20vh;"
title="确定最终报告"
:visible.sync="dialogVisibleQ"
width="30%"
:before-close="handleClose"
center
:append-to-body="true"
>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisibleQ = false">取 消</el-button>
<el-button type="primary" @click="dialogVisibleQ = false">确 定</el-button>
</span>
</el-dialog>
</div>
</div>
</div>
数据
data() {
return {
dialogVisibleQ: false,
};
},
//可不要
methods: {
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
2、表格
<div>
<div class="a">结果汇总列表</div>
<div class="a-a">
<div>
<el-button style="margin-bottom:10px">确认评价结果</el-button>
</div>
<div>
<el-button type="primary" @click="dialogVisibleQ = true">确定最终报告</el-button>
<el-dialog
style="margin-top: 20vh;"
title="确定最终报告"
:visible.sync="dialogVisibleQ"
width="30%"
:before-close="handleClose"
center
:append-to-body="true"
>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisibleQ = false">取 消</el-button>
<el-button type="primary" @click="dialogVisibleQ = false">确 定</el-button>
</span>
</el-dialog>
</div>
</div>
</div>
<div>
<el-table
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
border
style="width: 100%"
>
// fixed="left" 固定列和表头,默认为左
<el-table-column fixed prop="count" label="排名" width="60"></el-table-column>
<el-table-column fixed prop="fraction" label="汇总分数" width="60"></el-table-column>
<el-table-column fixed="left" prop="grade" label="等级" width="60"></el-table-column>
<el-table-column fixed="left" prop="date" label="部门" width="120"></el-table-column>
<el-table-column fixed="left" prop="address" label="部门负责人" width="120"></el-table-column>
//只需要在 el-table-column 里面嵌套 el-table-column,就可以实现 多级表头。
// header-align="center" 表头对齐方式-居中
<el-table-column label="一、合程性指标(60%)" header-align="center">
<el-table-column prop="nameA" label="1、是否具备理念(10分)" >
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" content="这里展示问题内容作为辅助显示" placement="top">
<!-- <el-input v-model="tableData.name" placeholder="请输入"></el-input> -->
<span
style="color:red;"
class="cor"
@click="dialogVisibleP = true"
>{{scope.row.nameA}}</span>
</el-tooltip>
</template>
</el-table-column>
<!-- <el-table-column prop="nameA" label="1、是否具备理念(10分)" width="120"></el-table-column> -->
<el-table-column prop="nameB" label="2、是否具备体系(5分)" width="120"></el-table-column>
<el-table-column prop="nameC" label="3、是否掌握标准(5分)" width="120"></el-table-column>
<el-table-column prop="nameD" label="4、是否实时关注业务(10分)" width="120"></el-table-column>
<el-table-column prop="nameE" label="5、是否积极参加培训(10分)" width="120"></el-table-column>
<el-table-column prop="nameF" label="6、是否掌握知识(10分)" width="120"></el-table-column>
<el-table-column prop="nameG" label="7、是否保持有效的沟通与配合机制(5分)" width="120"></el-table-column>
<el-table-column
prop="nameH"
label="8、专员的资质、任命、素质、工作开展情况等各项条件,是否符合公司制度要求(5分)"
width="120"
></el-table-column>
</el-table-column>
<el-table-column label="二、结果性指标(40%)" header-align="center">
<el-table-column label="9" header-align="center">
<el-table-column prop="countA" label="市场部门:是否存在的情况(20分)" width="120"></el-table-column>
<el-table-column prop="countB" label="另类部门:是否存在情形(20分)" width="120"></el-table-column>
<el-table-column prop="countC" label="销售部门:是否存在情形(20分)" width="120"></el-table-column>
<el-table-column
prop="countD"
label="产品客服部门:是否存在情形(20分)"
width="120"
></el-table-column>
<el-table-column
prop="countE"
label="中后台部门:是否确保要求(20分)"
width="120"
></el-table-column>
</el-table-column>
<el-table-column prop="gradeA" label="10、是否存在其他违规情形(5分)" width="80"></el-table-column>
<el-table-column prop="gradeB" label="11、是否存在其他违规情形(5分)" width="80"></el-table-column>
<el-table-column prop="gradeC" label="12、是否存在情形(5分)" width="80"></el-table-column>
<el-table-column prop="gradeD" label="13、是否存在情形(5分)" width="80"></el-table-column>
</el-table-column>
<el-table-column label="三、否定性指标">
<el-table-column
prop="fractionA"
label="14、本部门是否存在等"
width="120"
></el-table-column>
</el-table-column>
<el-table-column label="四、其他加减分">
<el-table-column
prop="fractionB"
label="15.在业务活动中开展的各项调研/检查活动等"
width="150"
></el-table-column>
</el-table-column>
</el-table>
<div class="pag">
<!-- <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination> -->
<el-pagination
small
layout="total,prev,pager,next,jumper"
:total="tableData.length"
:page-size="pagesize"
:current-page="currentPage"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</div>
<el-dialog
style="margin-top: 17vh;"
title="修改评分"
:visible.sync="dialogVisibleP"
width="30%"
:before-close="handleClose"
center
:append-to-body="true"
>
<el-form ref="formV" :model="formV" label-width="80px">
<div style="margin-bottom:8px">评分(必填)</div>
<el-input v-model="formV.name" width="100%" placeholder="请输入"></el-input>
</el-form>
<el-form ref="formV" :model="formV" label-width="80px">
<div style="margin-bottom:8px;margin-top:18px">评分理由</div>
<el-input type="textarea" v-model="formV.region" placeholder="请输入"></el-input>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisibleP = false">取 消</el-button>
<el-button type="primary" @click="dialogVisibleP = false">确 定</el-button>
</span>
</el-dialog>
数据
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;
}