优化通用表格设置单元格宽度问题

张诺

16 小时以前 07589fbf7e3fb9b998996664f4a3236b4c8d9acd

 src/components/PIMTable/PIMTable.vue

@@ -4,7 +4,7 @@
    v-loading="tableLoading"
    :border="border"
    :data="tableData"
    :header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
    :header-cell-style="mergedHeaderCellStyle"
    :height="height"
    :highlight-current-row="highlightCurrentRow"
    :row-class-name="rowClassName"
@@ -45,9 +45,10 @@
      :sortable="!!item.sortable"
      :type="item.type"
      :width="item.width"
      :minWidth="item.minWidth"
    >
      <template #header="scope">
        <div class="pim-table-header-cell">
        <div class="pim-table-header-cell" :class="{ 'has-extra': item.headerSlot }">
          <div class="pim-table-header-title">
            {{ item.label }}
          </div>
@@ -226,7 +227,7 @@

<script setup>
import pagination from "./Pagination.vue";
import { ref, inject, getCurrentInstance } from "vue";
import { computed, ref, inject, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";

// 获取全局的 uploadHeader
@@ -334,6 +335,13 @@
  },
});

const mergedHeaderCellStyle = computed(() => ({
  background: "var(--surface-soft)",
  color: "var(--text-secondary)",
  fontWeight: 600,
  ...props.headerCellStyle,
}));

// Data
const uploadRefs = ref([]);
const currentFiles = ref({});
@@ -367,11 +375,11 @@
    return format(val);
  } else return val;
};
const validTagTypes = ["primary", "success", "info", "warning", "danger"];

const formatType = (val, format) => {
  if (typeof format === "function") {
    return format(val);
  } else return "";
  const type = typeof format === "function" ? format(val) : undefined;
  return validTagTypes.includes(type) ? type : undefined;
};

const isOperationDisabled = (operation, row) => {
@@ -507,6 +515,12 @@
</script>

<style scoped lang="scss">
.lims-table {
  border: 1px solid var(--surface-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
}

.cell {
  white-space: nowrap;
  overflow: hidden;
@@ -519,4 +533,8 @@
.pim-table-header-extra :deep(.el-select) {
  width: 100%;
}

.pim-table-header-title {
  font-weight: 600;
}
</style>