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

最新推荐文章于 2024-07-10 16:18:57 发布
最新推荐文章于 2024-07-10 16:18:57 发布
阅读量1.2k 收藏 4
点赞数 1
分类专栏： element-ui开发笔记 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Y_seaboy/article/details/130373790
版权
这是一个关于在Vue.js项目中使用Element-UI组件库实现表格行和列合并的示例。代码展示了如何通过`span-method`属性来处理表格数据，根据特定条件合并单元格，如当数据项为小计或合计时进行行合并，以及根据预定义的列下标进行列合并。此外，还涉及到了多级表头的数据处理和表格数据的计算逻辑。
摘要由CSDN通过智能技术生成

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,
};
UpUp_seaboy
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementui合并表格的单元格:span-method=“objectSpanMethod“
weixin_45184627的博客
09-09 4701
//testResult是要展示的数据，为数组 //objectSpanMethod是官方给定的绑定属性和对应的方法，该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。 <el-table :data='testResult' :border="true" :span-method="objectSpanMethod"> ... </el-table> d
使用VUE的el-table标签的_span-method=_arraySpanMethod_合并列中重复的单元格.md
03-18
使用VUE的 :span-method="arraySpanMethod"进行表中单元格的合并，在js文件中进行具体的操作。
el-table 中 :span-method=“objectSpanMethod“合并单元格
qq_45000453的博客
01-26 665
【代码】el-table 中 objectSpanMethod合并单元格。
element el-table实现表格动态增加/删除/编辑表格行，带校验规则
最新发布
qq_61869009的博客
07-10 1831
element el-table实现表格动态增加/删除/编辑表格行，对每一行数据增加校验规则
elementPlus实现动态表格单元格合并span-method方法总结
时清云的博客
02-06 3865
最近在做PC端需求的时候，需要把首列中相邻的同名称单元格合并。 我看了一下elementPlus官网中的table表格，span-method可以实现单元格合并。我们先看一下官网的例子：多行或多列共用一个数据时，可以合并行或列。通过给 table 传入span-method方法可以实现合并行或列， 方法的参数是一个对象，里面包含当前行 row、当前列 column、当前行号 rowIndex、当前列号 columnIndex 四个属性。 该函数可以返回一个包含两个元素的数组，第一个元素代表 rowspan，
elementUi实现动态表格单元格合并span-method方法
weixin_43923808的博客
11-08 4491
(注意是2.X新加的方法)列号columnIndex。可以实现合并行或列，行号rowIndex。
Element vue :span-method=“objectSpanMethod“ 实现跨列-----合并
weixin_56408993的博客
01-29 2755
1. 下面图是实现效果 2. 代码实现 1、html页面 <el-table :data="tableData" border size="mini" align="center" :span-method="objectSpanMethod"> <el-table-column prop="deviceLocation" ...
el-table :span-method合并单元格
敲代码无敌小奶龙的博客
08-17 1230
el-table :span-method合并单元格
【JavaScript源代码】vue使用el-table动态合并列及行.docx
12-29
在Vue.js中，Element UI库提供了el-table组件，它是一个强大的表格组件，支持多种功能，包括动态合并行和列。本文将深入讲解如何在vue项目中利用el-table实现这一功能。 1. **动态合并行与列的基础** 首先，el-...
element-ui table span-method(行合并)的实现代码
01-19
element-ui官网中关于行合并的例子是根据行号进行合并的，这显然不符合我们日常开发需求，因为通常我们table中的数据都是动态生成的，所以需要做一些修改。我们首先解读一下官网实例中的各参数的意义： ...
vue element实现表格合并行数据
01-18
本文实例为大家分享了vue element实现表格合并行数据的具体代码，供大家参考，具体内容如下 支持不分页的表格数据，分页的表格数据还有小bug <el> <el> <el data=tableData xss=removed span-method=...
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
10-16
主要介绍了详解关于表格合并span-method方法的补充(表格数据由后台动态返回) ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue Elenent实现表格相同数据列合并
01-22
（同一个表格，但是每一行，固定一列的数据都相同，即可使用合并单元格，做到了既美观，也清晰。） template： <el span-method=objectSpanMethod4> Js: data(){ return{ orderdata:null,// 后端将数据查询出来后...
实际使用el-table中的span-method（合并行或列）方法的案例
rookien_的博客
01-23 5265
根据判断来写//第一列//行属性中rowspan存在，并且大于等于1的，开始合并return {rowspan: row.rowspan, //合并的行数colspan: 1 //合并的列数} else {//不合并，以下写法等于不操作任何return {colspan: 0},以上就是我工作遇到合并行的实例，和我的解决办法此外span-method方法中合并的行列可以写成return[row.rowspan,1]、return[0,0]。
Vue+Element-UI 中 el-table 动态合并单元格 :span-method 方法
⭐
11-22 8221
记录一下工作时遇到的 el-table 合并单元格的需求，超详细😊
Element+vue3.0 tabel合并单元格span-method
共同进步
01-09 1586
在 objectSpanMethod 方法中，rowspan 和 colspan 的值通常用来定义单元格的行跨度和列跨度。一般来说，rowspan 和 colspan 的值应该是大于等于1的整数，表示单元格的跨度。如果设置为0，则表示该单元格不跨行或列。然而，通常在 Vue 的 Element UI 表格中，rowspan 和 colspan 的值不应该为0，因为这可能会导致布局问题或显示异常。如果你尝试将 rowspan 或 colspan 设置为0，不生成单元格。
elementUI table表格合并列相同行:span-method="objectSpanMethod"
weixin_43023873的博客
09-26 5127
1.应用场景：在使用element表格table时一个需求是要相同列的相同厂家合并为一格显示 2.效果 3.代码实现【引入elementUI就不多说】 4.上代码 首先需要在eltable标签中加入绑定函数 :span-method=“objectSpanMethod” <el-table :span-method="objectSpanMethod" ...
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 =
element table合并行或列 span-method
emmmmmmm__的博客
09-20 936
再请求到后台数据之后如果数据不是按你想合并字段排序的话，这时候需要多做一步排序，把需要合并的那个字段分组显示，这里就不过多赘述了（这个分组一般后台都能做）。之后再调用接口获取到数据之后运行获取merge和subscript的方法。到这就已经把数据处理完了接下来就是处理el-table的合并方法。显然这种固定写法并不能满足我们日常开发中的需求。首先再data里定义两个变量。首先来看下官网上如何写的。接下来就讲一下如何操作。
el-table 合并行
10-19
el-table 合并行是指将表格中相邻的具有相同值的单元格合并成一个单元格，以减少表格的重复性和提高表格的可读性。以下是 el-table 合并行的实现方法： 1. 在 el-table 中使用 scoped slot 的方式自定义表格的渲染方式，通过判断相邻单元格的值是否相同，来决定是否需要合并单元格。 2. 使用 el-table-column 的 prop 属性来指定需要合并的列，然后在 el-table 中使用 span-method 属性来指定合并单元格的方法。 3. 在 el-table 中使用 merge-cells 属性来开启合并单元格的功能，然后在数据源中指定需要合并的单元格的位置和跨度。 以上是 el-table 合并行的三种实现方法，具体的实现方式可以根据实际需求选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值