张诺
8 天以前 1a73c77e1d14205014f6a77a8954de480d436c0e
src/components/Table/ETable.vue
@@ -1,27 +1,13 @@
<template>
    <el-table
      v-loading="loading"
      :data="tableData"
      :border="border"
      :show-selection="showSelection"
      :max-height="maxHeight"
      :header-cell-style="{ background: '#EBEEF5', color: '#3D3D3D' }"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
      @row-dblclick="handleRowDblClick"
      @cell-click="handleCellClick"
      :max-width="maxWidth"
      @export="handleExport"
    >
  <el-table v-loading="loading" :data="tableData" :border="border" :show-selection="showSelection" :max-height="maxHeight"
    :header-cell-style="{ background: '#EBEEF5', color: '#3D3D3D' }" @selection-change="handleSelectionChange"
    @row-click="handleRowClick" @row-dblclick="handleRowDblClick" @cell-click="handleCellClick" :max-width="maxWidth"
    @export="handleExport">
      <el-table-column v-if="showSelection" type="selection" width="55" align="center" />
      <el-table-column v-if="showIndex" label="序号" type="index" width="60" align="center"  />
      <template v-for="col in columns" :key="col.prop">
        <el-table-column
          v-bind="col"
          :show-overflow-tooltip="shouldShowTooltip(col, tableData)"
          :formatter="(row, column, cellValue) => cellValue == null || cellValue === '' ? '--' : cellValue"
          align="center"
        >
    <el-table-column v-if="showIndex" label="序号" type="index" width="60" align="center" /> <template
      v-for="col in columns" :key="col.prop">
      <el-table-column v-bind="col" :show-overflow-tooltip="shouldShowTooltip(col, tableData)"
        :formatter="col.formatter || defaultFormatter" align="center">
          <template v-if="col.slot" #default>
            <slot></slot>
          </template>
@@ -31,13 +17,8 @@
      <el-table-column v-if="showOperations" :label="operationsLabel" :width="operationsWidth" fixed="right" align="center">
        <template #default="scope">
          <slot name="operations" :row="scope.row">
            <el-button
              v-if="operations.includes('edit')"
              link
              type="primary"
              size="small"
              @click="handleEdit(scope.row)"
            >编辑</el-button>
          <el-button v-if="operations.includes('edit')" link type="primary" size="small"
            @click="handleEdit(scope.row)">编辑</el-button>
<!--            <el-button-->
<!--              v-if="operations.includes('delete')"-->
<!--              link-->
@@ -139,11 +120,21 @@
  })
  // 检查列是否需要显示tooltip
  const shouldShowTooltip = (col, data) => {
  // 如果列配置中明确设置了showOverflowTooltip,使用该设置
  if (col.hasOwnProperty('showOverflowTooltip')) {
    return col.showOverflowTooltip;
  }
  // 如果没有prop,直接返回false
  if (!col.prop) return false;
  // 检查该列在所有数据中是否有非空值
  // 检查该列在所有数据中是否有非空值,默认显示tooltip
  return data.some(row => row[col.prop] != null && row[col.prop] !== '');
};
// 默认的格式化函数
const defaultFormatter = (row, column, cellValue) => {
  return cellValue == null || cellValue === '' || cellValue === 0 ? '--' : cellValue;
};
// 处理选择变化、编辑、删除和导出操作
  const emit = defineEmits(['selection-change', 'edit', 'delete', 'export'])
  const handleSelectionChange = (selection) => {
@@ -187,4 +178,16 @@
      overflow-x: auto;
    }
  }
  /* 支持地址列换行显示 */
  :deep(.el-table .cell) {
    white-space: normal !important;
    word-break: break-all;
    line-height: 1.4;
  }
  /* 为地址列设置最小高度以容纳多行文本 */
  :deep(.el-table td) {
    padding: 8px 0;
  }
  </style>