table组件一般多行的合并列

spring

2025-02-19 3736ffe12c02654957290991186e3714e569c830

 src/components/Table/lims-table.vue

@@ -12,6 +12,7 @@
      :row-class-name="rowClassName"
      :row-style="rowStyle"
      :row-key="rowKey"
      :span-method="spanMethod"
      stripe
      style="width: 100%"
      tooltip-effect="dark"
@@ -48,7 +49,9 @@
        show-overflow-tooltip
        :sortable="item.sortable ? true : false"
        :type="item.type"
        :width="item.dataType === 'action'? getWidth(item.operation) : item.width"
        :width="
          item.dataType === 'action' ? getWidth(item.operation) : item.width
        "
        align="center"
      >
        <!-- <div class="123" v-if="item.type == ''"> -->
@@ -356,15 +359,23 @@
      },
    },
  },

  data() {
    return {
      spanInfo: {},
      spanList: [],
    };
  },
  created() {
    this.calculateSpanInfo();
  },
  methods: {
    getWidth(row) {
      let count = 0
      console.log('row---', row)
      row.forEach(a => {
        count += a.name.length
      })
      return count * 15 + 40 + 'px'
      let count = 0;
      console.log("row---", row);
      row.forEach((a) => {
        count += a.name.length;
      });
      return count * 15 + 40 + "px";
    },
    iconFn(row) {
      if (row.name === "编辑" || row.name === "修改") {
@@ -410,6 +421,88 @@
      }
      this.$parent[linkMethod](row);
    },
    // 合并单元格
    calculateSpanInfo() {
      // 初始化每列的合并信息
      this.spanList = [];
      this.column.forEach((m, i) => {
        if (m.mergeCol) {
          this.spanList.push({
            arr: [],
            position: 0,
            name: m.prop,
            index: i + 1,
          });
        }
      });
      this.spanList.forEach((item, i) => {
        this.rowspan(
          this.spanList[i].arr,
          this.spanList[i].position,
          item.name
        );
      });
    },
    rowspan(spanArr, position, spanName) {
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          spanArr.push(1);
          position = 0;
        } else {
          if (
            this.tableData[index][spanName] ===
            this.tableData[index - 1][spanName]
          ) {
            spanArr[position] += 1;
            spanArr.push(0);
          } else {
            spanArr.push(1);
            position = index;
          }
        }
      });
    },
    // 合并单元格
    spanMethod({ row, column, rowIndex, columnIndex }) {
      // 一般的合并行
      if (this.column.find((m) => m.mergeCol)) {
        let i = null;
        let obj = this.spanList.find((item, index) => {
          i = index;
          return item.index == columnIndex;
        });
        if (obj) {
          const _row = this.spanList[i].arr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col,
          };
        }
      }
      // // 特殊的合并行
      // if (
      //   this.data.spanConfig != undefined &&
      //   this.data.spanConfig.special &&
      //   this.data.spanConfig.special.main &&
      //   this.data.spanConfig.special.rows &&
      //   this.data.spanConfig.special.rows.length > 0
      // ) {
      //   let i = null;
      //   let obj = this.data.spanConfig.special.rows.find((item, index) => {
      //     i = index;
      //     return item.index == columnIndex;
      //   });
      //   if (obj) {
      //     const _row = this.specialSpanList[i].arr[rowIndex];
      //     const _col = _row > 0 ? 1 : 0;
      //     return {
      //       rowspan: _row,
      //       colspan: _col,
      //     };
      //   }
      // }
    },
  },
};
</script>