tenant-Platform/src/components/complexTable/index.vue

<template>
  <div class="containerTable">
    <div class="table_box">
      <div class="table-title-btn" v-if="$slots['table-title-btn']">
        <slot name="table-title-btn"></slot>
      </div>
      <!-- <OverlayScrollbarsComponent defer :options="{
        scrollbars: {
          autoHide: 'leave',      // 鼠标离开时自动隐藏
          clickScroll: true,      // 允许点击轨道滚动
          theme: 'my-theme',      // 自定义主题
        }
      }"> -->
        <el-table ref="multipleTableRef" :row-key="rowKey"
          :header-cell-style="{ 'background-color': '#F7F7F9', 'border-bottom': '1px solid #EEF1F6', 'font-size': '15px', 'color': '#333', 'padding': '10px 0' }"
          :data="props.tableData" :height="tableHeight" :max-height="maxHeight" table-layout="fixed"
          style="width: 100%;" @selection-change="selectionChange" @select-all="selectAllChange"
          @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseLeave"
          :highlight-current-row="highlightCurrentRow" @current-change="currentChange" v-loading="loading"
          :show-summary='props.showSummary' border>
          <!-- 空内容自定义 -->
          <template #empty>
            <div class="flex f-c a-c ">
              <img src="../../assets/images/empty.png" alt="">
              <span style="font-size: 14px;color: #909399;">暂无数据</span>
            </div>
          </template>
          <el-table-column type="selection" v-if="showSelect" :selectable="selectable" width="55" fixed="left" />
          <el-table-column type="expand" v-if="secondaryTable">
            <template #default="props">
              <div>
                <el-table :data="props.row.children">
                  <el-table-column v-for="column in secondaryColumns" :key="column.prop" :prop="column.prop"
                    :label="column.label" :sortable="column.sortable ? 'custom' : false" :width="column.width">
                    <template #header>
                      <slot name="search" :slotData="column"></slot>
                    </template>
                    <template #default="scope">
                      <RouterLink v-if="column.component === 'RouterLink'" :to="getRouterLinkTo(scope.row, column)"
                        class="custom-link">
                        {{ scope.row[column.prop] }}
                      </RouterLink>
                      <el-tag v-else-if="column.component === 'Tag'" :type="getTagTypeAndText(scope.row, column).type">
                        {{ getTagTypeAndText(scope.row, column).text }}
                      </el-tag>
                      <ImagePreview v-else-if="column.component === 'Image'" :src="getImgTo(scope.row, column)"
                        width="50px" height="50px"></ImagePreview>
                      <template v-else>
                        {{ getDisplayText(scope.row, column) }}
                      </template>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" fixed="right" :width="props.columnwidth">
                    <template #default="scope">
                      <slot name="secondary" :secondaryData="scope.row"></slot>
                    </template>
                  </el-table-column>
                </el-table>
              </div>

            </template>
          </el-table-column>
          <el-table-column v-if="showIndex" type="index" label="序号" width="55" />
          <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
            :sortable="column.sortable ? 'custom' : false" :width="column.width" :filters="column.filters"
            :filter-method="column.filters ? (value, row) => row[column.prop] === value : undefined"
            :filtered-value="column.filteredValue ? column.filteredValue : undefined" :fixed="column.fixed || false"
            :align="column.align ? column.align : 'center'" show-overflow-tooltip>
            <template #header>
              <slot name="search" :slotData="column"></slot>
            </template>
            <template #default="scope" v-if="column.component === 'customSlot'">
              <slot name="customSlot" :data="scope.row" :bodyCell="{ scope, column }"></slot>
              <slot :name="column.prop" :data="scope.row" :bodyCell="{ scope, column }"></slot>
            </template>
            <template #default="scope" v-else>
              <RouterLink v-if="column.component === 'RouterLink'" :to="getRouterLinkTo(scope.row, column)"
                class="custom-link">
                {{ scope.row[column.prop] }}
              </RouterLink>
              <div v-else-if="column.component === 'html'">
                <span v-html="htmlEvent(scope.row, column).html"></span>
              </div>
              <el-tag v-else-if="column.component === 'Tag'" :type="getTagTypeAndText(scope.row, column).type">
                {{ getTagTypeAndText(scope.row, column).text }}
              </el-tag>
              <ImagePreview v-else-if="column.component === 'Image'" :src="getImgTo(scope.row, column)" width="50px"
                height="50px"></ImagePreview>
              <span v-else>
                <div
                  v-if="typeof getDisplayText(scope.row, column) === 'string' && getDisplayText(scope.row, column).includes('\n')"
                  class="flex f-c ">
                  <span v-for="(line, index) in getDisplayText(scope.row, column).split('\n')" :key="index">{{ line
                  }}</span>
                </div>
                <span v-else>
                  {{ getDisplayText(scope.row, column) }}
                </span>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" :width="props.columnwidth" v-if="props.showOperation"
            align="center">
            <template #default="scope">
              <div class="flex a-c j-c">
                <slot name="operation" :operationData="scope.row"></slot>
              </div>
            </template>
          </el-table-column>
        </el-table>
      <!-- </OverlayScrollbarsComponent> -->
    </div>
    <div class="page_box" v-if="props.pageInfo">
      <el-pagination v-model:current-page="props.pageInfo.pageNum" v-model:page-size="props.pageInfo.pageSize"
        :page-sizes="props.pageInfo.sizes" layout="total, sizes, prev, pager, next, jumper"
        :total="props.pageInfo.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';

import { defineProps, ref, onMounted, defineEmits } from "vue";
import type { TableInstance } from "element-plus";

interface TableRow {
  [key: string]: any;
}
const emit = defineEmits(['getList', 'selectAllChange', 'selectionChange', 'currentChange', 'handleMouseEnter', 'handleMouseLeave']);
interface Props {
  tableData: Array<TableRow>;
  columnwidth: number,//操作栏宽度
  secondaryTable?: boolean,//是否展示二级表格
  highlightCurrentRow?: boolean,//是否可点击
  showOperation?: boolean,//操作显示/隐藏
  loading?: boolean,
  showSummary?: boolean, //合计
  columns: {
    prop: string;
    label: string;
    sortable?: boolean;
    width?: string;
    style?: string;
    align?: string,
    component?: string,
    formatter?: (row: any, column: any, cellValue: any, index: number) => any;

  }[];
  secondaryColumns?: {
    prop: string;
    label: string;
    sortable?: boolean;
    width?: string;
    style?: string;
    component?: string,
    formatter?: (row: any, column: any, cellValue: any, index: number) => any;
  }[];
  pageInfo?: {
    pageNum: number;
    pageSize: number;
    sizes: number[];
    total: number;
  };
  showSelect: boolean;
  showIndex: boolean;
  tableheight?: (number | string),
  maxHeight?: (number | string),
  uniqueIdName?: string,
  rowKey?: string,
};
interface Row {
  [key: string]: any; // 假设Row是一个具有任意属性的对象
}
interface RouterLink {
  name: string;
}
const props = withDefaults(defineProps<Props>(), {
  showOperation: true, // 默认值为 true
});
const loading = ref(false)
const tableHeight = ref(props.tableheight); // 初始化表格高度
const newSelectionList = ref<string[]>([]);
const multipleTableRef = ref<TableInstance>();
const TableData = ref<TableRow[]>();
watch(props, () => {
  if (props.loading != undefined) {
    loading.value = props.loading;

  }
})
onMounted(() => {
  let counter = 1;
  TableData.value = props.tableData.map((row) => ({
    ...row,
    _edit: false, // 设置默认非编辑状态
    counter: counter++

  }));
  if (!props.tableheight) handleResize();
});
function handleResize() {
  // 获取当前窗口的高度
  const height = window.innerHeight;
  // 在这里可以执行其他操作，比如更新某个元素的高度等
  const tableElement = multipleTableRef.value?.$el as HTMLElement;
  if (tableElement && !props.showSummary) {
    const offsetTop = tableElement.offsetTop; // 获取 offsetTop
    tableHeight.value = height - offsetTop - 230 + "px";
  }
}
// 监听窗口的 resize 事件
window.addEventListener('resize', handleResize);
const selectable = () => true;
const handleSizeChange = (val: number) => {
  if (props.pageInfo) {
    props.pageInfo.pageSize = val
    emit('getList', props.pageInfo);
  }
}
//多选

const selectAllChange = (value: any[]) => {

  newSelectionList.value = [];
  if (value.length > 0) {
    value.map(val => {
      newSelectionList.value.push(val.id)
    })
  } else {
    newSelectionList.value = [];
  }
  emit('selectAllChange', newSelectionList.value)

}
/**
 * //单元格移入事件
 * @param row 行数据
 */
const handleMouseEnter = (row: any) => {
  emit('handleMouseEnter', row)
}
/**
 * //单元格移出事件
 * @param row 行数据
 */
const handleMouseLeave = (row: any) => {
  emit('handleMouseLeave', row)
}
//行点击事件
const currentChange = (currentRow: any, _oldCurrentRow: any) => {
  emit('currentChange', currentRow)
}
const selectionChange = (value: any[]) => {
  newSelectionList.value = [];
  if (value.length > 0) {
    value.map(val => {
      if (props.uniqueIdName) {
        newSelectionList.value.push(val[props.uniqueIdName])
      } else {
        newSelectionList.value.push(val.id)
      }
    })
  } else {
    newSelectionList.value = [];
  }
  emit('selectionChange', newSelectionList.value)
}
const handleCurrentChange = (val: number) => {
  if (props.pageInfo) {
    props.pageInfo.pageNum = val
    emit('getList', props.pageInfo);
  }

}
//空值处理
const displayValue = (value: any) => {
  return value === null || value === undefined || value === '' ? '-' : value;
}
// 格式化内容配置
function getRouterLinkTo(row: Row, column: any): RouterLink {
  return column.formatter ? column.formatter(row, column, row[column.prop]) : { name: 'OrganizationAdd' };
}
function getImgTo(row: Row, column: any) {
  return row[column.prop];
}
function getTagTypeAndText(row: Row, column: any) {
  // 使用 formatter 返回一个对象，包含 type 和 text
  return column.formatter ? column.formatter(row, column, row[column.prop]) : { type: 'primary', text: row[column.prop] };
}
function getDisplayText(row: Row, column: any): string {
  return column.formatter ? column.formatter(row, column, row[column.prop]) : displayValue(row[column.prop]);
}
function htmlEvent(row: Row, column: any) {
  return column.formatter ? column.formatter(row, column, row[column.prop]) : row[column.prop]
}
</script>
<style lang="scss" scoped>
.el-table .el-table__cell .routerlick>a {
  color: red;
}

.containerTable {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.custom-link {
  color: #0083ff;

  /* 设置文字颜色 */
  text-decoration: none;

  /* 去掉下划线 */
}

.table_box {
  flex: 1;
  margin-bottom: 10px;
  overflow-y: auto;

  .table_item_container {
    padding: 0;
    margin-left: 20px;

    .table_item {
      margin: 5px 0;
    }
  }

  .table-title-btn {
    margin-bottom: 20px;

    :deep(.el-button) {
      margin-right: 20px;
    }
  }
}

.page_box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>