1.table样式修改

gaoluyang

2025-02-19 d9278399af79ff513af399f8976651f08276cc14

 src/components/Table/lims-table.vue

@@ -19,7 +19,12 @@
      @current-change="currentChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column 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 +48,7 @@
        show-overflow-tooltip
        :sortable="item.sortable ? true : false"
        :type="item.type"
        :width="item.width"
        :width="item.dataType === 'action'? getWidth(item.operation) : item.width"
        align="center"
      >
        <!-- <div class="123" v-if="item.type == ''"> -->
@@ -170,6 +175,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 +308,7 @@
    },
    border: {
      type: Boolean,
      default: false,
      default: true,
    },
    highlightCurrentRow: {
      type: Boolean,
@@ -344,6 +358,14 @@
  },

  methods: {
    getWidth(row) {
      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 === "修改") {
        return "el-icon-edit";
@@ -381,6 +403,13 @@
      // 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);
    },
  },
};
</script>
@@ -389,14 +418,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>