zouyu
2025-03-18 bc44c8e3c9d85691ce3fa73ef1300a6fae46e365
src/components/Table/lims-table.vue
@@ -4,6 +4,8 @@
    <el-table
      ref="multipleTable"
      v-loading="tableLoading"
      element-loading-text="加载中..."
      element-loading-spinner="el-icon-loading"
      :border="border"
      :data="tableData"
      :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
@@ -12,8 +14,8 @@
      :row-class-name="rowClassName"
      :row-style="rowStyle"
      :row-key="rowKey"
      :span-method="spanMethod"
      stripe
      :span-method="finalSpanMethod"
      :stripe="stripe"
      style="width: 100%"
      tooltip-effect="dark"
      @row-click="rowClick"
@@ -52,10 +54,8 @@
        "
        :sortable="item.sortable ? true : false"
        :type="item.type"
        :width="
          item.dataType === 'action' ? getWidth(item.operation) : item.width
        "
        align="center"
        :width="item.dataType == 'action' ? btnWidth : item.width"
      >
        <!-- <div class="123" v-if="item.type == ''"> -->
        <template
@@ -134,7 +134,10 @@
          </div>
          <!-- 按钮 -->
          <div v-else-if="item.dataType == 'action'">
          <div
            v-else-if="item.dataType == 'action'"
            :style="`width:${getWidth(item.operation, scope.row)}`"
          >
            <template v-for="(o, key) in item.operation">
              <el-button
                v-show="o.type != 'upload'"
@@ -151,16 +154,10 @@
                {{ o.name }}
              </el-button>
              <el-upload
                :action="
                  javaApi +
                  o.url +
                  '?id=' +
                  (o.uploadIdFun ? o.uploadIdFun(scope.row) : scope.row.id)
                "
                :action="javaApi + o.url"
                size="mini"
                ref="upload"
                :multiple="o.multiple ? o.multiple : false"
                :limit="1"
                :disabled="o.disabled ? o.disabled(scope.row) : false"
                :accept="
                  o.accept
@@ -169,6 +166,10 @@
                "
                v-if="o.type == 'upload' && o.url"
                style="display: inline-block; width: 50px"
                :data="o.data ? o.data(scope.row) : {}"
                :before-upload="
                  o.beforeUpload ? o.beforeUpload(scope.row) : () => true
                "
                v-show="o.showHide ? o.showHide(scope.row) : true"
                :headers="uploadHeader"
                :on-error="onError"
@@ -217,11 +218,13 @@
          <!-- 可点击的文字 -->
          <div
            v-else-if="item.dataType == 'link'"
            class="cell link"
            class="cell"
            style="width: 100%"
            @click="goLink(scope.row, item.linkMethod)"
            @click="goLink(scope.row, item.linkEvent)"
          >
            <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span>
            <span class="link" v-if="!item.formatData">
              {{ scope.row[item.prop] }}
            </span>
          </div>
          <!-- 默认纯展示数据 -->
          <div v-else class="cell" style="width: 100%">
@@ -316,9 +319,13 @@
    },
  },
  props: {
    parentSpanMethod: {
      type: Function,
      default: () => {},
    },
    isSelection: {
      type: Boolean,
      default: false,
      default: undefined,
    },
    height: {
      type: String,
@@ -354,6 +361,10 @@
      type: Boolean,
      default: false,
    },
    stripe: {
      type: Boolean,
      default: false,
    },
    headerCellStyle: {
      type: Object,
      default: () => {
@@ -382,7 +393,7 @@
    },
    rowKey: {
      type: String,
      default: undefined,
      default: "id",
    },
    page: {
      type: Object,
@@ -399,21 +410,49 @@
  data() {
    return {
      spanList: [],
      btnWidth: "120px",
    };
  },
  watch: {
    // column(val) {
    //   this.doLayout();
    // },
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.multipleTable.doLayout();
    });
  },
  computed: {
    finalSpanMethod() {
      if(this.parentSpanMethod) {
        console.log('父组件的合并方法');
        return this.parentSpanMethod;
      }else{
        console.log('子组件的合并方法');
        return this.spanMethod;
      }
    },
  },
  mounted() {
    this.calculateSpanInfo();
  },
  methods: {
    getWidth(row) {
    doLayout() {
      this.$nextTick(() => {
        this.$refs.multipleTable && this.$refs.multipleTable.doLayout();
      });
    },
    getWidth(row, row0) {
      let count = 0;
      row.forEach((a) => {
        if (a.showHide !== undefined && a.showHide()) {
        if (a.showHide !== undefined && a.showHide(row0)) {
          count += a.name.length;
        } else if (!a.showHide) {
          count += a.name.length;
        }
      });
      this.btnWidth = count * 15 + 70 + "px";
      return count * 15 + 70 + "px";
    },
    iconFn(row) {
@@ -453,6 +492,7 @@
          this.$message.success("上传成功");
        }
      }
      this.$refs.upload.clearFiles();
    },
    onError(err, file, fileList) {
      this.$message.error("上传失败");
@@ -470,11 +510,12 @@
      return (this.page.current - 1) * this.page.size + index + 1;
    },
    // 点击单元格link事件
    goLink(row, linkMethod) {
      if (!linkMethod) {
    goLink(row, linkEvent) {
      if (!linkEvent) {
        return this.$message.warning("请配置lingk事件");
      }
      this.$parent[linkMethod](row);
      console.log(linkEvent);
      linkEvent.vueComponent[linkEvent.method](row);
    },
    // 合并单元格
    calculateSpanInfo() {