• 使用Element的table合并单元格的问题(合并列)


    官网案例:

    <template>
      <div>
        <el-table
          :data="tableData"
          :span-method="objectSpanMethod"
          border
          style=" 100%; margin-top: 20px">
          <el-table-column
            prop="id"
            label="ID"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="amount1"
            label="数值 1(元)">
          </el-table-column>
          <el-table-column
            prop="amount2"
            label="数值 2(元)">
          </el-table-column>
          <el-table-column
            prop="amount3"
            label="数值 3(元)">
          </el-table-column>
        </el-table>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            tableData: [{
              id: '12987122',
              name: '王小虎',
              amount1: '234',
              amount2: '3.2',
              amount3: 10
            }, {
              id: '12987123',
              name: '王小虎',
              amount1: '165',
              amount2: '4.43',
              amount3: 12
            }, {
              id: '12987124',
              name: '王小虎',
              amount1: '324',
              amount2: '1.9',
              amount3: 9
            }, {
              id: '12987125',
              name: '王小虎',
              amount1: '621',
              amount2: '2.2',
              amount3: 17
            }, {
              id: '12987126',
              name: '王小虎',
              amount1: '539',
              amount2: '4.1',
              amount3: 15
            }]
          };
        },
        methods: {     
    
          objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
              if (rowIndex % 2 === 0) {
                return {
                  rowspan: 2,
                  colspan: 1
                };
              } else {
                return {
                  rowspan: 0,
                  colspan: 0
                };
              }
            }
          }
        }
      };
    </script>

    我的代码:

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (column.property === "positionItemName" || column.property === "saName") { // 这部分是因为我需要切换合并的列
              if (rowIndex  === 0 ) {
                this.$nextTick(() => {
                  this.$refs['table_2'].doLayout();
                })
                return {
                  rowspan: this.keySATestAndDealData.length, // 根据数据长度合并
                  colspan: 1
                };
              }else {
                return [0, 0]
              }
            }
          },
  • 相关阅读:
    【从零开始学Spring笔记】Spring学习路线
    【从零开始学Java笔记】目录
    【超详细全过程】安装IntelliJ IDEA下载
    【超详细全过程】JavaEE 开发环境安装全过程(jdk+tomcat+eclipse)
    【超详细全过程】安装MySQL+Navicat
    Eclipse更新maven项目仓库依赖
    变量
    二进制
    JVM虚拟机查找类文件的顺序
    JRE、JDK概述
  • 原文地址:https://www.cnblogs.com/weiweiyeyu/p/15351553.html
Copyright © 2020-2023  润新知