文件下载 >>/download/jemycc/12837044
突然发现vxe会更方便
vxe官网: https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/install.
element 表格 评分表（合并单元格，单选框按钮选分）
图片:
html:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/demo.css"></head><body><div id="app"><template><div class="tableA"><el-table :data="tableData":span-method="objectSpanMethod"@cell-mouse-leave="cellMouseLeave"@cell-mouse-enter="cellMouseEnter":cell-class-name="tableRowClassName" border style="width: 100%" ><el-table-column prop="ONE" label="一级指标"></el-table-column><el-table-column prop="TWO" label="二级指标"></el-table-column><el-table-column prop="id" label="序号"></el-table-column><el-table-column prop="THREE" label="三级指标" width="180"></el-table-column><el-table-column prop="explain" label="评分说明" width="700"></el-table-column><el-table-column prop="score" label="得分"><template slot-scope="scope"><el-radio-group v-model="scope.row.score" :prop="`tableData.${scope.$index}.score`" :rules="tableRules.score"><el-radio :label="item" v-for="item in scope.row.scoreData ">{{item}}</el-radio></el-radio-group></template></el-table-column></el-table></div><div class="tableB"><el-table :data="tableDataS" :span-method="objectSpanMethodS"@cell-mouse-leave="cellMouseLeaveS"@cell-mouse-enter="cellMouseEnterS":cell-class-name="tableRowClassNameS" border style="width: 100%"><el-table-column prop="ONE" label="一级指标"></el-table-column><el-table-column prop="TWO" label="二级指标"></el-table-column><el-table-column prop="id" label="序号"></el-table-column><el-table-column prop="THREE" label="三级指标" width="180"></el-table-column><el-table-column prop="explain" label="评分说明" width="700"></el-table-column><el-table-column prop="score" label="得分"><template slot-scope="scope"><el-radio-group v-model="scope.row.score"><el-radio :label="item" v-for="item in scope.row.scoreData ">{{item}}</el-radio></el-radio-group></template></el-table-column></el-table></div><div v-text="sum"></div></template></div></body><script src="./js/jquery-3.1.1.min.js"></script><script src="./js/vue.js"></script><script src="./js/elementui.min.js"></script><script src="./js/index.js"></script><script src="./js/demo.js"></script></html>
css:
@import url("index.css");.tableB {margin-top: 80px;}// 一定要写这个，评分那一列使用了 换行符 "\n",加这个才能生效.el-table .cell {white-space: pre-line;}
js:
var App = new Vue({el: "#app",data() {return {// A表rowIndex: "-1",OrderIndexArr: [],TWOIndexArr: [],hoverOrderArr: [],// A表总和Asum:[],tableData: [{ONE: "演练准备",TWO: "演练组织",id: "1",THREE: "目标原则",explain:"5：目标制定有针对性；演练原则讲求实效。\n3：目标针对性不足，原则实效性不强。\n1：只有简单的演练目标或原则",scoreData: [5,3,1],score:null},{ONE: "演练准备",TWO: "演练组织",id: "2",THREE: "组织机构",explain:"7：按照“策划、保障、实施、评估”设置组织机构，权责分工明确。\n3：组织机构不健全，职责分工不明确。\n0：未成立应急演练组织机构",scoreData: [7,3,0],score: null},{ONE: "演练准备",TWO: "演练组织",id: "3",THREE: "指挥机构设施",explain:"8：明确演练总指挥、副指挥、现场指挥，演练指挥员佩戴袖标或演练职务标识证牌。\n5：明确演练总指挥、副指挥、现场指挥，但演练指挥员未佩戴袖标或演练职务标识证牌。\n1：基本明确明确演练总指挥、副指挥、现场指挥，但演练指挥员未佩戴袖标或演练职务标识证牌。",scoreData: [8,5,1],score: null,},{ONE: "演练准备",TWO: "计划方案",id: "4",THREE: "演练计划一致性",explain:"5：符合预案规定，按照“先单项后综合、循序渐进、时空有序”的原则制定，计划切合实际。\n3:有演练计划，但存在不合理内容。\n0:与预案等规定不一致。",scoreData: [5,3,3],score: null,},{ONE: "演练准备",TWO: "计划方案",id: "5",THREE: "演练情景设定",explain:"10：预案管理部门、专兼职救援队伍、志愿者等涉案单位均参与，对演练角色任务清楚。\n5：部分单位人员参与，未全面覆盖。\n1：队伍数量少。",scoreData: [10,5,1],score: null,},{ONE: "演练准备",TWO: "演练保障",id: "6",THREE: "参演力量",explain:"10：预案管理部门、专兼职救援队伍、志愿者等涉案单位均参与，对演练角色任务清楚。\n5：部分单位人员参与，未全面覆盖。\n1：队伍数量少。",scoreData: [10,5,1],score: null,},{ONE: "演练准备",TWO: "演练保障",id: "7",THREE: "演练经费",explain: "5：演练经费充足。\n3：有经费，但不充足。\n0：无经费。",scoreData: [5,3,0],score: null,},{ONE: "演练准备",TWO: "演练保障",id: "8",THREE: "应急专家",explain:"3：有专家参与，且专业对口。\n2：有专家参与，但专业不对口。\n1：无专家参与。",scoreData: [3,2,1],score: null,},{ONE: "演练实施",TWO: "信息传达",id: "9",THREE: "信息传递",explain:"5：信息传递清楚，要素齐全。\n3：传递比较迅速，部分要素不全。\n1：信息传递存在失误，需重复确认。",scoreData: [5,3,1],score: null,},{ONE: "演练实施",TWO: "信息传达",id: "10",THREE: "演练解说",explain:"5：演练背景、进程等解说清晰正确，与现场同步。。\n3：解说不清晰或不同步。\n0：演练解说存在重大错误或无演练解说。",scoreData: [5,3,0],score: null,},{ONE: "演练实施",TWO: "应急响应",id: "11",THREE: "分级响应",explain:"5：根据事态发展，分级响应迅速、准确。\n3：分级响应部分环节不准确。\n0：无分级响应。",scoreData: [5,3,0],score: null,},{ONE: "演练实施",TWO: "应急响应",id: "12",THREE: "指挥控制能力",explain:"7：演练指挥全程指挥控制能力强，指挥处理果断、有序，与演练脚本一致。\n3：指挥过程与演练脚本不一致。\n0：指挥决策不当。",scoreData: [7,3,0],score: null,},{ONE: "演练实施",TWO: "应急响应",id: "13",THREE: "处置措施",explain:"10：按照发生真实事件的应急处理程序进行处理，方法科学。\n5：处置措施单一。\n0：处置不科学。",scoreData: [10,5,0],score: null,},{ONE: "演练实施",TWO: "舆论引导",id: "14",THREE: "新闻宣传",explain:"5：舆论引导及时，有媒体参与。\n3：舆论引导及时，无媒体参与。\n0：无舆论引导，并引发不良社会影响。",scoreData: [5,3,0],score: null,},{ONE: "演练实施",TWO: "人员表现",id: "15",THREE: "人员表现",explain:"5：态度积极，演练现场效果真实。\n3：态度较为积极，演练现场效果一般。\n0：态度一般，演练现场效果较差。",scoreData: [5,3,0],score: null,},{ONE: "演练总结",TWO: "记录讲评",id: "16",THREE: "演练记录",explain:"5：演练全过程安排有文字、音像记录。\n3：有文字记录，但无音像记录。\n0：无文字、音像记录。",scoreData: [5,3,0],score: null,},{ONE: "演练总结",TWO: "记录讲评",id: "17",THREE: "演练讲评",explain:"5：演练讲评全面，问题分析到位。\n3：演练讲评不全面。\n1：演练讲评格式化，与演练对应性差。",scoreData: [5,3,1],score: null,},{ONE: "得分A",TWO: "",id: "",THREE: "",explain: "",score: null,},],// B表rowIndexS: "-1",OrderIndexArrS: [],TWOIndexArrS: [],hoverOrderArrS: [],tableDataS: [{ONE: "评价总结",TWO: "预案完善",id: "1",THREE: "预案检验",explain:"5：能够发现预案存在的问题和薄弱点。\n3：提出的问题对完善预案作用不大。\n0：无检验效果。",scoreData: [5,3,0],score: null,},{ONE: "评价总结",TWO: "预案完善",id: "2",THREE: "完善措施",explain:"5：提出改进措施，有修订时间和具体步骤。\n3：无改进具体计划，改进效果不明显。\n1：无改善措施。",scoreData: [5,3,1],score: null,},{ONE: "评价总结",TWO: "资料备案",id: "3",THREE: "调查报告",explain:"5：符合演练实际，问题分析涵盖范围广，全面到位。\n3：仅对部分问题进行总结，但内容不全面。\n1：报告格式化，内容简单。",scoreData: [5,3,1],score: null,},{ONE: "评价总结",TWO: "资料备案",id: "4",THREE: "文件归档及备案",explain:"5：演练方案、演讲脚本、演练总结评估报告及音像资料归档、上报备案及时全面。\n3：有归档，但未上报备案。\n0：既未归档，也无上报备案。",scoreData: [5,3,0],score: null,},{ONE: "得分B",TWO: "",id: "",THREE: "",explain: "",score: "",},],// 验证tableRules:{//银行所在省score:[{required: true, message: '请选择评分',trigger: 'change'},],},};},created() {},computed: {//计算得分总和sum: function() {// 表Alet total = 0let num =0this.tableData.forEach((v,i) => {total +=v.scorenum=i});this.tableData[num].TWO=total// 表Blet totalS = 0let numS =0this.tableDataS.forEach((v,i) => {totalS +=v.scorenumS=i});console.log();this.tableDataS[numS].TWO=totalS}},mounted() {this.getOrderNumber();},methods: {getOrderNumber() {// A表let OrderObj = {};let TWOObj = {};// 循环，自动把重名的合并this.tableData.forEach((element, index) => {element.rowIndex = index;if (OrderObj[element.ONE]) {OrderObj[element.ONE].push(index);} else {OrderObj[element.ONE] = [];OrderObj[element.ONE].push(index);}if (TWOObj[element.TWO]) {TWOObj[element.TWO].push(index);} else {TWOObj[element.TWO] = [];TWOObj[element.TWO].push(index);}});// 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）for (let k in OrderObj) {if (OrderObj[k].length > 1) {this.OrderIndexArr.push(OrderObj[k]);}}for (let k in TWOObj) {if (TWOObj[k].length > 1) {this.TWOIndexArr.push(TWOObj[k]);}}// B表let OrderObjS = {};let TWOObjS = {};this.tableDataS.forEach((element, index) => {element.rowIndex = index;if (OrderObjS[element.ONE]) {OrderObjS[element.ONE].push(index);} else {OrderObjS[element.ONE] = [];OrderObjS[element.ONE].push(index);}if (TWOObjS[element.TWO]) {TWOObjS[element.TWO].push(index);} else {TWOObjS[element.TWO] = [];TWOObjS[element.TWO].push(index);}});// 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）for (let k in OrderObjS) {if (OrderObjS[k].length > 1) {this.OrderIndexArrS.push(OrderObjS[k]);}}for (let k in TWOObjS) {if (TWOObjS[k].length > 1) {this.TWOIndexArrS.push(TWOObjS[k]);}}},// 合并单元格 A表objectSpanMethod({row, column, rowIndex, columnIndex }) {// columnIndex 表示第几列！！ 等于0 就是第一列if (columnIndex === 0) {for (let i = 0; i < this.OrderIndexArr.length; i++) {let element = this.OrderIndexArr[i];for (let j = 0; j < element.length; j++) {let item = element[j];if (rowIndex == item) {if (j == 0) {return {rowspan: element.length,colspan: 1,};} else if (j != 0) {return {rowspan: 0,colspan: 0,};}}}}//处理最后一行计算总和 ，他是第17行，然后再合并//这个就是合并同一行的！！if (rowIndex == 17) {return [1, 2];}} else if (columnIndex === 1) {for (let i = 0; i < this.TWOIndexArr.length; i++) {let element = this.TWOIndexArr[i];for (let j = 0; j < element.length; j++) {let item = element[j];if (rowIndex == item) {if (j == 0) {return {rowspan: element.length,colspan: 1,};} else if (j != 0) {return {rowspan: 0,colspan: 0,};}}}}if (rowIndex == 17) {return [2, 4];}}},tableRowClassName({row, rowIndex }) {let arr = this.hoverOrderArr;for (let i = 0; i < arr.length; i++) {if (rowIndex == arr[i]) {return "hovered-row";}}},cellMouseEnter(row, column, cell, event) {this.rowIndex = row.rowIndex;this.hoverOrderArr = [];this.OrderIndexArr.forEach((element) => {if (element.indexOf(this.rowIndex) >= 0) {this.hoverOrderArr = element;}});},cellMouseLeave(row, column, cell, event) {this.rowIndex = "-1";this.hoverOrderArr = [];},// 合并单元格 B表objectSpanMethodS({row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {for (let i = 0; i < this.OrderIndexArrS.length; i++) {let element = this.OrderIndexArrS[i];for (let j = 0; j < element.length; j++) {let item = element[j];if (rowIndex == item) {if (j == 0) {return {rowspan: element.length,colspan: 1,};} else if (j != 0) {return {rowspan: 0,colspan: 0,};}}}}if (rowIndex == 4) {return [1, 2];}} else if (columnIndex === 1) {for (let i = 0; i < this.TWOIndexArrS.length; i++) {let element = this.TWOIndexArrS[i];for (let j = 0; j < element.length; j++) {let item = element[j];if (rowIndex == item) {if (j == 0) {return {rowspan: element.length,colspan: 1,};} else if (j != 0) {return {rowspan: 0,colspan: 0,};}}}}if (rowIndex == 4) {return [2, 4];}}},tableRowClassNameS({row, rowIndex }) {let arr = this.hoverOrderArr;for (let i = 0; i < arr.length; i++) {if (rowIndex == arr[i]) {return "hovered-row";}}},cellMouseEnterS(row, column, cell, event) {this.rowIndexS = row.rowIndex;this.hoverOrderArrS = [];this.OrderIndexArrS.forEach((element) => {if (element.indexOf(this.rowIndex) >= 0) {this.hoverOrderArrS = element;}});},cellMouseLeaveS(row, column, cell, event) {this.rowIndexS = "-1";this.hoverOrderArrS = [];},},});
