element 表格 评分表（合并单元格，单选框按钮选分，计算表格总分）

最新推荐文章于 2024-04-07 17:19:06 发布
最新推荐文章于 2024-04-07 17:19:06 发布
阅读量1k 收藏 2
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jemycc/article/details/108529124
版权

文件下载 >>https://download.csdn.net/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() {
      // 表A
      let total = 0
      let num =0
      this.tableData.forEach((v,i) => {
        total +=v.score
        num=i
      });
      this.tableData[num].TWO=total
      // 表B
      let totalS = 0
      let numS =0
      this.tableDataS.forEach((v,i) => {
        totalS +=v.score
        numS=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 = [];
    },
  },
});
皮卡丘在哪里啊
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Element Rate 评分的使用方法
10-15
主要介绍了Element Rate 评分的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue+element-ui table 实现表格 评分
katy_1的博客
12-14 7513
本文将实现从后台读取评分数据，并以星花的形式展现在表格中。具体展现如下图所示：   具体代码如下： &lt;el-table-column prop="evaValue" label="评分"&gt; &lt;template slot-scope="scope" &gt; &lt;!-- &lt;el-rate v-model="scope.row.evaValu
el-table表格动态合并相同数据单元格(可指定列+自定义合并)
最新发布
泶雪乖女
04-07 2464
该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。我们可以看到，所有列，只要数据相同的单元格都被合并了，包括我不想合并的单元格，这时候就要。只需要加个if判断即可指定要合并哪些列。这样就只合并了我们指定的那几列了。这时候再看，就是我们想要的效果了。
Element-Ui实现评分表，评分项，一个例子掌握table合并行和列，computed计算总分，某级分类的最大评分值，超详细！逐行注释。
TangBoBoa的博客
04-17 1291
起初接到这个需求的时候很苦恼，因为没有写过类似的内容，给了一个excel，让通过页面展示出来，最终还要填写分数，校验并存入到数据库中，刚开始想着是通过树状table展示，可是这样的话离图中效果差距很大，估计也是不能接收，下面就看看我是如何实现的吧。首先我们的数据库中是以id，pid形式存储的数据，最多分为四级评分项，在这个例子中不涉及到后台拼接数据的内容，只是前端编写的假数据进行展示，需要实现后端的小伙伴可以按照我的数据格式去用sql查询出对应的格式即可复用。
element 表格tabel笔记之合并单元格
kekexiaomayi的博客
03-09 257
element 表格tabel笔记之合并单元格
eltable刷新整个表格方法_HR：历年考评汇总，这么难用的表格，也是历年积累出来的吧...
weixin_39862985的博客
11-19 257
今日目标：如何对历年考评汇总「好的表格是设计出来的」，这句话在年底盘点、费用汇总、绩效汇总的时候，感觉越是真理。小刘是个HR，第10期Excel营的学员，年底要对员工历年的绩效进行汇总统计。遇到了一个难题：绩效是文本，没办统计汇总。每年的绩效考评，都是打的「ABCD」，或者「卓越、优秀、良好」，汇总的时候，这些都是文本，没办法进行求和计算。好在小刘在Excel营里学会了VLOOKUP函数...
element-ui中Table表格省市区合并单元格的方法实现
01-19
本文介绍了element-ui中Table表格省市区合并单元格的方法实现，分享给大家，具体如下： 效果如图 代码如下: 搜索> 搜索> <el-b
element带选择表格将表头的复选框改成文字的实现代码
12-28
方法一：使用表格属性：header-cell-class-name 表格界面代码 data=tableData header-cell-class-name=cellclass xss=removed> 日期 width=120> <templ
element-ui表格el-table动态合并单元格（合并行和列）以及给表头添加斜线
01-11
实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
vue+element UI实现树形表格带复选框的示例代码
10-17
主要介绍了vue+element UI实现树形表格带复选框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
别样的表格操作：vue + element 实现动态表格
热门推荐
Shids_的博客
06-17 1万+
别样的表格操作：vue + element 实现动态表格
基于elementui的单页面后台管理项目模版
08-12
基于 element-ui 的单页面后台管理项目模版
Vue+Element-ui实例_可编辑表格和分页（2）改进版
徐小硕—心之所向，素履以往
11-13 360
本篇文章是对上一篇《Vue.js_实例_可编辑表格和分页》的改进版 改进处： （1）对某一行的编辑时，设置背景颜色提醒，
vue2 + element-ui 实现试卷在线打分 上传的页面（移动端）
m0_73267676的博客
03-02 1141
vue2 + element-ui 实现试卷在线打分 上传的页面
vue+elementui实现内容不一样的多级表格
qq_42740298的博客
09-01 1063
vue+element实现多级表格
vue使用el-table动态拆分/合并数据，以及合并列
Lingling_12356的博客
06-28 3756
项目场景： 拆分数据：一条数据拆分成两条 scheduleList(params).then(res => { if (res.code === 200) { let result = res.data; result.forEach(item => { item.StartTimeAndEndTime = item.sectionStartTime + "-" + item.sectionEndTime;
vue +element 评价功能
weixin_38673922的博客
08-19 2068
vue element 评价功能。
vue+element实现单选多选 答题的打分demo(从0-1全过程)
benlalagang的博客
07-22 3942
答题: vue+element答题demo 包含单选 多选 判断、打分页面
element表格组件 合并单元格
07-11
要在element-ui的表格组件中合并单元格，可以利用`span-method`属性来自定义合并规则。下面是一个示例代码，展示如何合并表格中相同的值： ```html 姓名"> 年龄"> 性别"> export default { data() { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值