使用 objectSpanMethod 实现动态el-table合并行、合并列功能

最新推荐文章于 2025-07-14 16:50:17 发布
原创 最新推荐文章于 2025-07-14 16:50:17 发布 · 1.8k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言 #ecmascript

这是一个关于在Vue.js项目中使用Element-UI组件库实现表格行和列合并的示例。代码展示了如何通过`span-method`属性来处理表格数据，根据特定条件合并单元格，如当数据项为小计或合计时进行行合并，以及根据预定义的列下标进行列合并。此外，还涉及到了多级表头的数据处理和表格数据的计算逻辑。

objectSpanMethod的理解

1、 rowspan = 0；colspan = 0, 当前单元格不显示
2、 rowspan = 1；colspan = 1, 当前单元格正常显示
1、 rowspan = x；colspan = y, 当前行往下合并x行，当前列往右合并y列

效果：

在这里插入图片描述

代码：

<template>
  <div style="padding: 20px">
    <el-table
      :data="tableData"
      max-height="800"
      :border="true"
      fit
      :span-method="objectSpanMethod"
    >
      <template v-for="(item, index) in tableHeader">
        <reportTableColumn
          v-if="item.children && item.children.length"
          :columnHeader="item"
          :key="index"
        />
        <el-table-column
          v-else
          :fixed="item.fixed"
          :align="item.align"
          :prop="item.prop"
          :label="item.label"
          :key="index"
          :min-width="item.width"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
import reportTableColumnVue from "./components/reportTableColumn.vue";
import testData from "./testData.js";
export default {
  name: "test",
  components: {
    reportTableColumn: reportTableColumnVue,
  },
  data() {
    return {
      tableData: [],
      staticTableHeadData: [
        {
          label: "工程量名称",
          prop: "outPutName",
          align: "left",
          width: "260",
        },
        {
          prop: "",
          width: 150,
          label: "工程量",
          align: "center",
          children: [
            {
              prop: "outPutMainValue",
              width: 150,
              label: "主审",
              align: "center",
            },
            {
              prop: "outPutSubValue",
              width: 150,
              label: "送审",
              align: "center",
            },
          ],
        },
        { label: "差异量", prop: "showDiffSize", align: "right", width: "150" },
        {
          label: "差异率(%)",
          prop: "showDiffRate",
          align: "right",
          width: "150",
        },
      ], //土建和安装静态表头
      dynamicTableHeadData: [
        {
          prop: "所属算量楼层",
          width: 100,
          fixed: true,
          label: "楼层",
          align: "center",
        },
        {
          prop: "混凝土强度等级",
          width: 100,
          fixed: true,
          label: "砼标号",
          align: "center",
        },
        {
          prop: "构件编号/类型名称",
          width: 100,
          fixed: true,
          label: "构件编号",
          align: "center",
        },
      ], //后台返回的动态表头
      spanRow: [0, 1, 2], //需要设置合并行的列 
      spanArr: [],
      tableHeaderList: [],
    };
  },

  created() {
    this.tableHeader = [
      ...this.dynamicTableHeadData,
      ...this.staticTableHeadData,
    ];
  },
  mounted() {
    this.tableData = testData.tableData1;
    this.$nextTick(() => {
      this.getAllSpanRow();
    });
  },
  methods: {
    /**
     * 设置表格的合并行
     * @param row
     * @param column
     * @param rowIndex
     * @param columnIndex
     * @returns {{colspan: number, rowspan: *}}
     */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let rowspan = 1,
        colspan = 1; //正常显示
      if (row[column.property] === "小计" || row[column.property] === "合计") {
        //记录小计单元格的行号，获取小计后合并的单元使用
        this.sumIndex = rowIndex;
        let sum = 1;
        for (let i = columnIndex + 1; i < this.tableHeaderList.length; i++) {
          //小计单元格合并规则：小计后值为空 则往后合并列（sum + 1）
          let value = this.tableData[rowIndex][this.tableHeaderList[i]];
          if (value === "") {
            sum += 1;
          }
        }
        rowspan = 1;
        colspan = sum;
      } else if (rowIndex === this.sumIndex && row[column.property] === "") {
        //小计后合并的单元格 不用显示了
        rowspan = 0;
        colspan = 0;
      }
      //根据传入合并列下标数组，计算每列的合并行和列
      let spanRow = this.spanRow;
      if (
        !!spanRow &&
        spanRow.includes(columnIndex) &&
        this.spanArr.length > 0
      ) {
        rowspan = this.spanArr[columnIndex][rowIndex];
        colspan = rowspan > 0 ? colspan : 0;
      } else {
        rowspan = rowspan;
        colspan = colspan;
      }
      return {
        rowspan,
        colspan,
      };
    },
    /**
     * 计算每个单元格的rowspan
     * @param idx  需要设置合并行的 列下标
     * @param prop 单元格数据名称
     */
    getSpanArr(idx, prop) {
      this.spanArr[idx] = [];
      this.position = 0;
      let tableData = this.tableData;
      tableData.forEach((item, index) => {
        if (index === 0) {
          this.spanArr[idx].push(1);
          this.position = 0;
        } else {
          if (
            tableData[index][prop] !== "" &&
            tableData[index][prop] === tableData[index - 1][prop]
          ) {
            this.spanArr[idx][this.position] += 1; //有相同项
            this.spanArr[idx].push(0); // 名称相同后往数组里面加一项0
          } else {
            this.spanArr[idx].push(1); //同列的前后两行单元格不相同
            this.position = index;
          }
        }
      });
    },

    /**
     * 获取所有单元格行的合并数
     */
    getAllSpanRow() {
      this.spanArr = [];
      this.tableHeaderList = [];

      if (!this.spanRow || !this.tableData || this.tableData.length === 0) {
        return;
      } else {
        this.getPropList(this.tableHeader);
        this.spanRow.forEach((item, i) => {
          this.getSpanArr(item, this.tableHeaderList[item]);
        });
      }
    },
    /**
     * 按表格顺序存放表头的prop
     */
    getPropList(data) {
      data.forEach((item, i) => {
        let { prop, children } = item;
        if (!!prop) {
          this.tableHeaderList.push(prop);
        } else {
          this.getPropList(children);
        }
      });
    },
  },
};
</script>

reportTableColumn组件：（对多级表头做处理）

<template>
  <el-table-column
    class="reportTableColumn"
    :align="columnHeader.align"
    :label="columnHeader.label"
    :prop="columnHeader.prop"
  >
    <template v-for="(item, index) in columnHeader.children">
      <tableColumn
        v-if="item.children && item.children.length"
        :columnHeader="item"
        :key="index"
      />
      <el-table-column
        v-else
        :prop="item.prop"
        :fixed="item.fixed"
        :align="item.align"
        :label="item.label"
        :min-width="item.width"
        :key="index"
        :width="widthRollStatus ? item.width + 'px' : ''"
        :show-overflow-tooltip="true"
      >
      </el-table-column
      >>
    </template>
  </el-table-column>
</template>
<script>
export default {
  name: "tableColumn",
  props: {
    columnHeader: {
      type: Object,
      required: true,
    },
    widthRollStatus: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

测试数据：

const data1 = [
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "",
    outPutName: "体积",
    outPutMainValue: 29.25,
    outPutSubValue: 0,
    showDiffSize: "29.25",
    showDiffRate: "100",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "",
    outPutName: "模板面积",
    outPutMainValue: 216.25,
    outPutSubValue: 0,
    showDiffSize: "216.25",
    showDiffRate: "100",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "",
    outPutName: "数量",
    outPutMainValue: 39,
    outPutSubValue: 0,
    showDiffSize: "39",
    showDiffRate: "100",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 0,
    showDiffSize: "0",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 0,
    showDiffSize: "0",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "AKZ1",
    outPutName: "体积",
    outPutMainValue: 0,
    outPutSubValue: 7.2168,
    showDiffSize: "-7.2168",
    showDiffRate: "100",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "AKZ1",
    outPutName: "模板面积",
    outPutMainValue: 0,
    outPutSubValue: 44.2266,
    showDiffSize: "-44.2266",
    showDiffRate: "100",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "AKZ1",
    outPutName: "数量",
    outPutMainValue: 0,
    outPutSubValue: 10,
    showDiffSize: "-10",
    showDiffRate: "100",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "AKZ1",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 26.5665,
    showDiffSize: "-26.5665",
    showDiffRate: "100",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "AKZ1",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 4.1635,
    showDiffSize: "-4.1635",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ1",
    outPutName: "体积",
    outPutMainValue: 232.979,
    outPutSubValue: 0,
    showDiffSize: "232.979",
    showDiffRate: "100",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ1",
    outPutName: "模板面积",
    outPutMainValue: 1793.1666,
    outPutSubValue: 0,
    showDiffSize: "1793.1666",
    showDiffRate: "100",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ1",
    outPutName: "数量",
    outPutMainValue: 441,
    outPutSubValue: 4,
    showDiffSize: "437",
    showDiffRate: "99.09",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ1",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 6.4,
    showDiffSize: "-6.4",
    showDiffRate: "100",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ1",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 0.64,
    showDiffSize: "-0.64",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ4",
    outPutName: "体积",
    outPutMainValue: 0,
    outPutSubValue: 0,
    showDiffSize: "0",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ4",
    outPutName: "模板面积",
    outPutMainValue: 0,
    outPutSubValue: 0,
    showDiffSize: "0",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ4",
    outPutName: "数量",
    outPutMainValue: 0,
    outPutSubValue: 2,
    showDiffSize: "-2",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ4",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 2.4,
    showDiffSize: "-2.4",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ4",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 0.16,
    showDiffSize: "-0.16",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "ZHZ1",
    outPutName: "体积",
    outPutMainValue: 6,
    outPutSubValue: 0,
    showDiffSize: "6",
    showDiffRate: "100",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "ZHZ1",
    outPutName: "模板面积",
    outPutMainValue: 45.84,
    outPutSubValue: 0,
    showDiffSize: "45.84",
    showDiffRate: "100",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "ZHZ1",
    outPutName: "数量",
    outPutMainValue: 12,
    outPutSubValue: 0,
    showDiffSize: "12",
    showDiffRate: "100",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "ZHZ1",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 0,
    showDiffSize: "0",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "ZHZ1",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 0,
    showDiffSize: "0",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "小计",
    outPutName: "体积",
    outPutMainValue: 268.229,
    outPutSubValue: 7.2168,
    showDiffSize: "261.0122",
    showDiffRate: "97.31",
    type: "sum",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "小计",
    outPutName: "模板面积",
    outPutMainValue: 2055.2566,
    outPutSubValue: 44.2266,
    showDiffSize: "2011.03",
    showDiffRate: "97.85",
    type: "sum",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "小计",
    outPutName: "数量",
    outPutMainValue: 492,
    outPutSubValue: 16,
    showDiffSize: "476",
    showDiffRate: "96.75",
    type: "sum",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "小计",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 35.3665,
    showDiffSize: "-35.3665",
    showDiffRate: "100",
    type: "sum",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "小计",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 4.9635,
    showDiffSize: "-4.9635",
    showDiffRate: "100",
    type: "sum",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "小计",
    "构件编号/类型名称": "",
    outPutName: "体积",
    outPutMainValue: 268.229,
    outPutSubValue: 7.2168,
    showDiffSize: "261.0122",
    showDiffRate: "97.31",
    type: "sum",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "小计",
    "构件编号/类型名称": "",
    outPutName: "模板面积",
    outPutMainValue: 2055.2566,
    outPutSubValue: 44.2266,
    showDiffSize: "2011.03",
    showDiffRate: "97.85",
    type: "sum",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "小计",
    "构件编号/类型名称": "",
    outPutName: "数量",
    outPutMainValue: 492,
    outPutSubValue: 16,
    showDiffSize: "476",
    showDiffRate: "96.75",
    type: "sum",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "小计",
    "构件编号/类型名称": "",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 35.3665,
    showDiffSize: "-35.3665",
    showDiffRate: "100",
    type: "sum",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "1F",
    混凝土强度等级: "小计",
    "构件编号/类型名称": "",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 4.9635,
    showDiffSize: "-4.9635",
    showDiffRate: "100",
    type: "sum",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ1",
    outPutName: "体积",
    outPutMainValue: 0,
    outPutSubValue: 0,
    showDiffSize: "0",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ1",
    outPutName: "模板面积",
    outPutMainValue: 0,
    outPutSubValue: 0,
    showDiffSize: "0",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ1",
    outPutName: "数量",
    outPutMainValue: 0,
    outPutSubValue: 4,
    showDiffSize: "-4",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ1",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 6.4,
    showDiffSize: "-6.4",
    showDiffRate: "100",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ1",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 0.64,
    showDiffSize: "-0.64",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ2",
    outPutName: "体积",
    outPutMainValue: 0,
    outPutSubValue: 4.524,
    showDiffSize: "-4.524",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ2",
    outPutName: "模板面积",
    outPutMainValue: 0,
    outPutSubValue: 22.6194,
    showDiffSize: "-22.6194",
    showDiffRate: "100",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ2",
    outPutName: "数量",
    outPutMainValue: 0,
    outPutSubValue: 5,
    showDiffSize: "-5",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ2",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 12.5665,
    showDiffSize: "-12.5665",
    showDiffRate: "100",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ2",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 2.5135,
    showDiffSize: "-2.5135",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ3",
    outPutName: "体积",
    outPutMainValue: 0,
    outPutSubValue: 2.97,
    showDiffSize: "-2.97",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ3",
    outPutName: "模板面积",
    outPutMainValue: 0,
    outPutSubValue: 25.2,
    showDiffSize: "-25.2",
    showDiffRate: "100",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ3",
    outPutName: "数量",
    outPutMainValue: 0,
    outPutSubValue: 5,
    showDiffSize: "-5",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ3",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 14,
    showDiffSize: "-14",
    showDiffRate: "100",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ3",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 1.65,
    showDiffSize: "-1.65",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ4",
    outPutName: "体积",
    outPutMainValue: 0,
    outPutSubValue: 0,
    showDiffSize: "0",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ4",
    outPutName: "模板面积",
    outPutMainValue: 0,
    outPutSubValue: 0,
    showDiffSize: "0",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ4",
    outPutName: "数量",
    outPutMainValue: 0,
    outPutSubValue: 2,
    showDiffSize: "-2",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ4",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 2.4,
    showDiffSize: "-2.4",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ4",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 0.16,
    showDiffSize: "-0.16",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "小计",
    outPutName: "体积",
    outPutMainValue: 0,
    outPutSubValue: 7.494,
    showDiffSize: "-7.494",
    showDiffRate: "100",
    type: "sum",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "小计",
    outPutName: "模板面积",
    outPutMainValue: 0,
    outPutSubValue: 47.8194,
    showDiffSize: "-47.8194",
    showDiffRate: "100",
    type: "sum",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "小计",
    outPutName: "数量",
    outPutMainValue: 0,
    outPutSubValue: 16,
    showDiffSize: "-16",
    showDiffRate: "100",
    type: "sum",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "小计",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 35.3665,
    showDiffSize: "-35.3665",
    showDiffRate: "100",
    type: "sum",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "小计",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 4.9635,
    showDiffSize: "-4.9635",
    showDiffRate: "100",
    type: "sum",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "小计",
    "构件编号/类型名称": "",
    outPutName: "体积",
    outPutMainValue: 0,
    outPutSubValue: 7.494,
    showDiffSize: "-7.494",
    showDiffRate: "100",
    type: "sum",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "小计",
    "构件编号/类型名称": "",
    outPutName: "模板面积",
    outPutMainValue: 0,
    outPutSubValue: 47.8194,
    showDiffSize: "-47.8194",
    showDiffRate: "100",
    type: "sum",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "小计",
    "构件编号/类型名称": "",
    outPutName: "数量",
    outPutMainValue: 0,
    outPutSubValue: 16,
    showDiffSize: "-16",
    showDiffRate: "100",
    type: "sum",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "小计",
    "构件编号/类型名称": "",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 35.3665,
    showDiffSize: "-35.3665",
    showDiffRate: "100",
    type: "sum",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "3F",
    混凝土强度等级: "小计",
    "构件编号/类型名称": "",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 4.9635,
    showDiffSize: "-4.9635",
    showDiffRate: "100",
    type: "sum",
    diffSize: "normal",
    diffRate: "normal",
  },
];
const data2 = [
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "",
    outPutName: "体积",
    outPutMainValue: 3,
    outPutSubValue: 0,
    showDiffSize: "3",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "",
    outPutName: "模板面积",
    outPutMainValue: 22.25,
    outPutSubValue: 0,
    showDiffSize: "22.25",
    showDiffRate: "100",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "",
    outPutName: "数量",
    outPutMainValue: 4,
    outPutSubValue: 0,
    showDiffSize: "4",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 0,
    showDiffSize: "0",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 0,
    showDiffSize: "0",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ1",
    outPutName: "体积",
    outPutMainValue: 0,
    outPutSubValue: 0,
    showDiffSize: "0",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ1",
    outPutName: "模板面积",
    outPutMainValue: 0,
    outPutSubValue: 0,
    showDiffSize: "0",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ1",
    outPutName: "数量",
    outPutMainValue: 0,
    outPutSubValue: 4,
    showDiffSize: "-4",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ1",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 6.4,
    showDiffSize: "-6.4",
    showDiffRate: "100",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ1",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 0.64,
    showDiffSize: "-0.64",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ-2",
    outPutName: "体积",
    outPutMainValue: 0,
    outPutSubValue: 4.524,
    showDiffSize: "-4.524",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ-2",
    outPutName: "模板面积",
    outPutMainValue: 0,
    outPutSubValue: 22.6194,
    showDiffSize: "-22.6194",
    showDiffRate: "100",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ-2",
    outPutName: "数量",
    outPutMainValue: 0,
    outPutSubValue: 5,
    showDiffSize: "-5",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ-2",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 12.5665,
    showDiffSize: "-12.5665",
    showDiffRate: "100",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ-2",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 2.5135,
    showDiffSize: "-2.5135",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ-3",
    outPutName: "体积",
    outPutMainValue: 0,
    outPutSubValue: 2.97,
    showDiffSize: "-2.97",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ-3",
    outPutName: "模板面积",
    outPutMainValue: 0,
    outPutSubValue: 25.2,
    showDiffSize: "-25.2",
    showDiffRate: "100",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ-3",
    outPutName: "数量",
    outPutMainValue: 0,
    outPutSubValue: 5,
    showDiffSize: "-5",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ-3",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 14,
    showDiffSize: "-14",
    showDiffRate: "100",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ-3",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 1.65,
    showDiffSize: "-1.65",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ4",
    outPutName: "体积",
    outPutMainValue: 0,
    outPutSubValue: 0,
    showDiffSize: "0",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ4",
    outPutName: "模板面积",
    outPutMainValue: 0,
    outPutSubValue: 0,
    showDiffSize: "0",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ4",
    outPutName: "数量",
    outPutMainValue: 0,
    outPutSubValue: 2,
    showDiffSize: "-2",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ4",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 2.4,
    showDiffSize: "-2.4",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ4",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 0.16,
    showDiffSize: "-0.16",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "小计",
    outPutName: "体积",
    outPutMainValue: 3,
    outPutSubValue: 7.494,
    showDiffSize: "-4.494",
    showDiffRate: "-149.8",
    type: "sum",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "小计",
    outPutName: "模板面积",
    outPutMainValue: 22.25,
    outPutSubValue: 47.8194,
    showDiffSize: "-25.5694",
    showDiffRate: "-114.92",
    type: "sum",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "小计",
    outPutName: "数量",
    outPutMainValue: 4,
    outPutSubValue: 16,
    showDiffSize: "-12",
    showDiffRate: "-300",
    type: "sum",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "小计",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 35.3665,
    showDiffSize: "-35.3665",
    showDiffRate: "100",
    type: "sum",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "小计",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 4.9635,
    showDiffSize: "-4.9635",
    showDiffRate: "100",
    type: "sum",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "小计",
    "构件编号/类型名称": "",
    outPutName: "体积",
    outPutMainValue: 3,
    outPutSubValue: 7.494,
    showDiffSize: "-4.494",
    showDiffRate: "-149.8",
    type: "sum",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "小计",
    "构件编号/类型名称": "",
    outPutName: "模板面积",
    outPutMainValue: 22.25,
    outPutSubValue: 47.8194,
    showDiffSize: "-25.5694",
    showDiffRate: "-114.92",
    type: "sum",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "小计",
    "构件编号/类型名称": "",
    outPutName: "数量",
    outPutMainValue: 4,
    outPutSubValue: 16,
    showDiffSize: "-12",
    showDiffRate: "-300",
    type: "sum",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "小计",
    "构件编号/类型名称": "",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 35.3665,
    showDiffSize: "-35.3665",
    showDiffRate: "100",
    type: "sum",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "4F",
    混凝土强度等级: "小计",
    "构件编号/类型名称": "",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 4.9635,
    showDiffSize: "-4.9635",
    showDiffRate: "100",
    type: "sum",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "AKZ1",
    outPutName: "体积",
    outPutMainValue: 0,
    outPutSubValue: 7.494,
    showDiffSize: "-7.494",
    showDiffRate: "100",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "AKZ1",
    outPutName: "模板面积",
    outPutMainValue: 0,
    outPutSubValue: 47.8194,
    showDiffSize: "-47.8194",
    showDiffRate: "100",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "AKZ1",
    outPutName: "数量",
    outPutMainValue: 0,
    outPutSubValue: 10,
    showDiffSize: "-10",
    showDiffRate: "100",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "AKZ1",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 26.5665,
    showDiffSize: "-26.5665",
    showDiffRate: "100",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "AKZ1",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 4.1635,
    showDiffSize: "-4.1635",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ1",
    outPutName: "体积",
    outPutMainValue: 4.5,
    outPutSubValue: 0,
    showDiffSize: "4.5",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ1",
    outPutName: "模板面积",
    outPutMainValue: 33.77,
    outPutSubValue: 0,
    showDiffSize: "33.77",
    showDiffRate: "100",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ1",
    outPutName: "数量",
    outPutMainValue: 19,
    outPutSubValue: 4,
    showDiffSize: "15",
    showDiffRate: "78.95",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ1",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 6.4,
    showDiffSize: "-6.4",
    showDiffRate: "100",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ1",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 0.64,
    showDiffSize: "-0.64",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ4",
    outPutName: "体积",
    outPutMainValue: 0,
    outPutSubValue: 0,
    showDiffSize: "0",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ4",
    outPutName: "模板面积",
    outPutMainValue: 0,
    outPutSubValue: 0,
    showDiffSize: "0",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ4",
    outPutName: "数量",
    outPutMainValue: 0,
    outPutSubValue: 2,
    showDiffSize: "-2",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ4",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 2.4,
    showDiffSize: "-2.4",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "KZ4",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 0.16,
    showDiffSize: "-0.16",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "YBZ1",
    outPutName: "体积",
    outPutMainValue: 5.76,
    outPutSubValue: 0,
    showDiffSize: "5.76",
    showDiffRate: "100",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "YBZ1",
    outPutName: "模板面积",
    outPutMainValue: 48.96,
    outPutSubValue: 0,
    showDiffSize: "48.96",
    showDiffRate: "100",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "YBZ1",
    outPutName: "数量",
    outPutMainValue: 16,
    outPutSubValue: 0,
    showDiffSize: "16",
    showDiffRate: "100",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "YBZ1",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 0,
    showDiffSize: "0",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "YBZ1",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 0,
    showDiffSize: "0",
    showDiffRate: "100",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "小计",
    outPutName: "体积",
    outPutMainValue: 10.26,
    outPutSubValue: 7.494,
    showDiffSize: "2.766",
    showDiffRate: "26.96",
    type: "sum",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "小计",
    outPutName: "模板面积",
    outPutMainValue: 82.73,
    outPutSubValue: 47.8194,
    showDiffSize: "34.9106",
    showDiffRate: "42.2",
    type: "sum",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "小计",
    outPutName: "数量",
    outPutMainValue: 35,
    outPutSubValue: 16,
    showDiffSize: "19",
    showDiffRate: "54.29",
    type: "sum",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "小计",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 35.3665,
    showDiffSize: "-35.3665",
    showDiffRate: "100",
    type: "sum",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "C30",
    "构件编号/类型名称": "小计",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 4.9635,
    showDiffSize: "-4.9635",
    showDiffRate: "100",
    type: "sum",
    diffSize: "normal",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "小计",
    "构件编号/类型名称": "",
    outPutName: "体积",
    outPutMainValue: 10.26,
    outPutSubValue: 7.494,
    showDiffSize: "2.766",
    showDiffRate: "26.96",
    type: "sum",
    diffSize: "normal",
    diffRate: "normal",
    line: 4,
    spanList: [
      [1, 2],
      [0, 0],
      [0, 0],
    ],
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "小计",
    "构件编号/类型名称": "",
    outPutName: "模板面积",
    outPutMainValue: 82.73,
    outPutSubValue: 47.8194,
    showDiffSize: "34.9106",
    showDiffRate: "42.2",
    type: "sum",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "小计",
    "构件编号/类型名称": "",
    outPutName: "数量",
    outPutMainValue: 35,
    outPutSubValue: 16,
    showDiffSize: "19",
    showDiffRate: "54.29",
    type: "sum",
    diffSize: "red",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "小计",
    "构件编号/类型名称": "",
    outPutName: "周长",
    outPutMainValue: 0,
    outPutSubValue: 35.3665,
    showDiffSize: "-35.3665",
    showDiffRate: "100",
    type: "sum",
    diffSize: "green",
    diffRate: "normal",
  },
  {
    所属算量楼层: "转换层",
    混凝土强度等级: "小计",
    "构件编号/类型名称": "",
    outPutName: "截面面积",
    outPutMainValue: 0,
    outPutSubValue: 4.9635,
    showDiffSize: "-4.9635",
    showDiffRate: "100",
    type: "sum",
    diffSize: "normal",
    diffRate: "normal",
  },
];
export default {
  tableData1: data1,
  tableData2: data2,
};
el-table 合并相同行（二维数组）|【elementUI中el-table中span-method 中传递自定义参数】
吴小花的博客
02-20 1287
【代码】el-table 合并相同行（二维数组）|【elementUI中el-table中span-method 中传递自定义参数】
elementUI table表格合并列相同行:span-method="objectSpanMethod"
weixin_43023873的博客
09-26 5280
1.应用场景：在使用element表格table时一个需求是要相同列的相同厂家合并为一格显示 2.效果 3.代码实现【引入elementUI就不多说】 4.上代码 首先需要在eltable标签中加入绑定函数 :span-method=“objectSpanMethod” <el-table :span-method="objectSpanMethod" ...
element table 列合并 方法（重复的列数据合并）
weixin_46733392的博客
12-01 1656
element 表格
使用element UI实现表格行/列合并
qq_45854695的博客
11-11 1187
本文代码使用vue2+element UI，通过给table传入方法实现合并行或列。
Day 1 - 基本语法
qq_41175455的博客
09-22 1444
Day 1 1.基本语法 一、语句 （1条有效程序） print('你好！') print('世界！') # 一行有多条语句，要用分号隔开 print('你好！');print('世界！') 二、注释 注释是代码中不参与编译执行的说明性文字（不影响程序功能） # 单行注释————Ctrl+/ print('hello world!') # 在控制台打印hello world! # 多行注释————将文字放入一对'''或"""之间 """ 注释1 注释2 注释3 """ ''' A B
el-table 中 :span-method=“objectSpanMethod“合并单元格
qq_45000453的博客
01-26 1015
【代码】el-table 中 objectSpanMethod合并单元格。
el-table :span-method合并单元格
敲代码无敌小奶龙的博客
08-17 1914
el-table :span-method合并单元格
elementPlus中的el-table实现合并单元格
最新发布
蜗牛~~
07-14 641
本文介绍了在el-table中实现单元格合并的方法。通过在表格上添加span-method属性，并传入包含资源数据的数组（如CPU、MEM、GPU、NPU等配置信息），使用objectSpanMethod方法对相同itemKey的行进行合并。该方法核心逻辑是：1) 查找相同itemKey的起始行；2) 计算相同itemKey的行数；3) 对第一行返回合并行数，其他行隐藏单元格。最终实现按资源类型合并第一列单元格的效果，适用于展示资源配额等表格数据。
vue使用el-table动态合并列及行
mysunli的博客
01-27 2347
前两天项目中需要用到表单合并，特此记录，放便以后使用。 首先我使用的element-ui中的el-table，文档中提供span-method方法可以实现合并行或列，大家不熟悉的可以去看看element文档地址，但是文档提供的例子很简单，不能满足复杂的页面，所以需要处理一下数据。 如下代码： getListDataForRowAndColumn(data){ let self = this; self.rowAndColumn...
el-table动态合并单元格~隔行变色~自定义列索引等功能
萌萌的博客
07-27 858
el-table动态合并单元格、隔行变色、自定义索引等功能
【JavaScript源代码】vue使用el-table动态合并列及行.docx
12-29
在Vue.js中，Element UI库提供了el-table组件，它是一个强大的表格组件，支持多种功能，包括动态合并行和列。本文将深入讲解如何在vue项目中利用el-table实现这一功能。 1. **动态合并行与列的基础** 首先，el-...
elementPlus实现动态表格单元格合并span-method方法总结
时清云的博客
02-06 5803
最近在做PC端需求的时候，需要把首列中相邻的同名称单元格合并。 我看了一下elementPlus官网中的table表格，span-method可以实现单元格合并。我们先看一下官网的例子：多行或多列共用一个数据时，可以合并行或列。通过给 table 传入span-method方法可以实现合并行或列， 方法的参数是一个对象，里面包含当前行 row、当前列 column、当前行号 rowIndex、当前列号 columnIndex 四个属性。 该函数可以返回一个包含两个元素的数组，第一个元素代表 rowspan，
Vue+Element-UI 中 el-table 动态合并单元格 :span-method 方法
⭐
11-22 8940
记录一下工作时遇到的 el-table 合并单元格的需求，超详细😊
实际使用el-table中的span-method（合并行或列）方法的案例
rookien_的博客
01-23 8069
根据判断来写//第一列//行属性中rowspan存在，并且大于等于1的，开始合并return {rowspan: row.rowspan, //合并的行数colspan: 1 //合并的列数} else {//不合并，以下写法等于不操作任何return {colspan: 0},以上就是我工作遇到合并行的实例，和我的解决办法此外span-method方法中合并的行列可以写成return[row.rowspan,1]、return[0,0]。
elementui合并表格的单元格:span-method=“objectSpanMethod“
weixin_45184627的博客
09-09 4931
//testResult是要展示的数据，为数组 //objectSpanMethod是官方给定的绑定属性和对应的方法，该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。 <el-table :data='testResult' :border="true" :span-method="objectSpanMethod"> ... </el-table> d
element-ui 合并行或列 table :span-method（行合并）
热门推荐
可控的事情要谨慎，不可控的事情要乐观。
12-19 1万+
element-ui 官网案例： table合并行或列 element-ui官网中关于行合并的例子是根据行号进行合并的，这显然不符合我们日常开发需求，因为通常我们table中的数据都是动态生成的，所以需要做一些修改。我们首先解读一下官网实例中的各参数的意义： objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { //用于设置要合并的列 if (rowIndex % 2 =
Vue+Element-UI el-table表格根据指定条件动态合并行span-method
misschengispink的博客
03-26 2177
el-table标签上定义span-method方法methods里增加spanMethod方法return {rowspan: row.rowspan, // 需要合并的行数colspan: 1} else {// 不合并return {colspan: 0。
elementui objectSpanMethod 合并行使用
weixin_44941581的博客
09-05 286
【代码】elementui objectSpanMethod 合并行使用。
element table表格行列合并span-method，根据数据动态行列合并
红烧咸咸鱼
05-30 750
element table表格行列合并span-method，根据数据动态行列合并
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值