检验任务搬迁30%

spring

2025-02-20 037a7112a2bc9e38bb2f398ff5ca740ac01a8fb2

 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"
@@ -19,7 +20,12 @@
      @current-change="currentChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="55" v-if="isSelection" />
      <el-table-column
        align="center"
        type="selection"
        width="55"
        v-if="isSelection"
      />
      <el-table-column
        align="center"
        label="序号"
@@ -43,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 == ''"> -->
@@ -170,6 +178,15 @@
              </el-upload>
            </template>
          </div>
          <!-- 可点击的文字 -->
          <div
            v-else-if="item.dataType == 'link'"
            class="cell link"
            style="width: 100%"
            @click="goLink(scope.row, item.linkMethod)"
          >
            <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span>
          </div>
          <!-- 默认纯展示数据 -->
          <div v-else class="cell" style="width: 100%">
            <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span>
@@ -294,7 +311,7 @@
    },
    border: {
      type: Boolean,
      default: false,
      default: true,
    },
    highlightCurrentRow: {
      type: Boolean,
@@ -342,15 +359,22 @@
      },
    },
  },

  data() {
    return {
      spanList: [],
    };
  },
  mounted() {
    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 === "修改") {
@@ -389,6 +413,95 @@
      // return index * 2;
      return (this.page.current - 1) * this.page.size + index + 1;
    },
    // 点击单元格link事件
    goLink(row, linkMethod) {
      if (!linkMethod) {
        return this.$message.warning("请配置lingk事件");
      }
      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>
@@ -397,14 +510,22 @@
.el-table >>> .el-table__empty-text {
  text-align: center;
}

>>> .cell {
  padding: 0 !important;
}
.cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 4px;
  padding-left: 4px;
  padding-right: 4px !important;
  padding-left: 10px !important;
}
>>> .cell {
  padding: 0 !important;
.link {
  color: rgb(64, 158, 255);
  cursor: pointer;
}
>>> .el-table__body-wrapper::-webkit-scrollbar {
  height: 14px; /* 设置滚动条宽度 */
}
</style>