张诺
昨天 7619d415522ab3dc3299d6a2a9f5c9964a692d3f
src/components/Table/ETable.vue
@@ -18,9 +18,13 @@
    style="width: 100%"
  >
    <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" />
    <el-table-column v-if="showIndex" label="序号" width="60" align="center" fixed="left">
      <template #default="scope">
        {{ getRowIndex(scope.$index) }}
      </template>
    </el-table-column>
    <template v-for="col in columns" :key="col.prop">
      <el-table-column v-bind="col" :show-overflow-tooltip="shouldShowTooltip(col, tableData)"
      <el-table-column v-bind="col"
        :formatter="col.formatter || defaultFormatter" align="center">
        <template v-if="col.slot" #default="scope">
          <slot :name="col.prop" :row="scope.row" :column="scope.column" :index="scope.$index"></slot>
@@ -139,24 +143,22 @@
  rowKey: {
    type: String,
    default: 'id'
  },
  showOverflowTooltip: {
  },  showOverflowTooltip: {
    type: Boolean,
    default: true
  },
  // 当前页码
  currentPage: {
    type: Number,
    default: 1
  },
  // 每页大小
  pageSize: {
    type: Number,
    default: 10
  }
})
const tableRef = ref(null)
// 检查列是否需要显示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) => {
@@ -188,6 +190,11 @@
const handleExport = (row) => {
  emit('export', row)
}
// 计算分页序号
const getRowIndex = (index) => {
  return (props.currentPage - 1) * props.pageSize + index + 1;
};
// 正确的 toggleRowSelection 方法:针对单行
const toggleRowSelection = (row, selected) => {
@@ -270,6 +277,9 @@
</script>
  
  <style scoped>
  :deep(.el-tooltip) {
    justify-content: center !important;
  }
.el-table {
    margin: 20px 0 !important;
  }