表格-多层级表头-带分页-带文字提示-带弹框

tech2023-11-09 80

表格-多层级表头-带分页-带文字提示-带弹框

图例

格式

1、按钮-带弹框

数据

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">  <span style="color:red;" class="cor" @click="dialogVisibleP = true" >{{scope.row.nameA}}</span> </el-tooltip> </template> </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 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; }

最新回复(0)