vue3基于elementplus 简单实现表格二次封装过程

<template>
  <div>
    <el-table
      :data="dataSource"
      v-loading="loading"
      :height="vdaH"
      :max-height="vdaH"
      :fit="fit"
      :border="border"
      :header-cell-class-name="headerCellClassName"
      highlight-current-row
      :tooltip-options="{
        effect: 'dark',
        placement: 'bottom',
        showArrow: true,
      }"
      show-overflow-tooltip
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="isMoreSelect"
        type="selection"
        width="55"
        :selectable="handleSelectable"
      />
      <el-table-column type="index" label="序号" width="55" />
      <template v-for="(column, index) in columns" :key="index">
        <el-table-column
          show-overflow-tooltip
          v-if="column.scopeVal"
          :prop="column.prop"
          :label="column.label"
          :min-width="column.width || column.label.length * 20 + 20"
        >
          <template #default="scope">
            <slot
              :column="column"
              :record="scope.row"
              :text="scope.row[column.prop]"
              :index="dataSource.indexOf(scope.row)"
              :name="column.prop"
            >
            </slot>
          </template>
        </el-table-column>
        <!-- :min-width="column.width || column.label.length * 20 + 20" -->
        <el-table-column
          v-else
          :prop="column.prop"
          :label="column.label"
          :min-width="
            column.width ||
            getColumnWidth(column.label, column.prop, dataSource)
          "
        >
          <template #default="{ row }">
            {{ checkEmpty(row[column.prop]) }}
          </template>
        </el-table-column>
      </template>
      <!-- 操作 -->
      <el-table-column
        v-if="!hideOperation"
        fixed="right"
        label="操作"
        align="center"
        :width="operationWidth"
      >
        <template #default="scope">
          <slot v-bind="scope"></slot>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        v-show="totalNum > 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:current-page.sync="page"
        :page-sizes="[10, 20, 50, 100]"
        v-model:page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        background
        small
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { checkEmpty, getColumnWidth } from "@/utils/util";
const props = defineProps({
  dataSource: {
    type: Array<any>,
    default: () => [],
  },
  columns: {
    type: Array<any>,
    default: () => [],
  },
  vdaH: {
    type: Number,
    default: 300,
  },
  hideOperation: {
    type: Boolean,
    default: false,
  },
  operationWidth: {
    type: String,
    default: "100",
  },
  loading: {
    type: Boolean,
    default: false,
  },
  //是否多选显示
  isMoreSelect: {
    type: Boolean,
    default: false,
  },
  fit: {
    type: Boolean,
    default: true,
  },
  border: {
    type: Boolean,
    default: false,
  },
  headerCellClassName: {
    type: String,
    default: "custmorTableHeader",
  },
  // 当前页
  currentPage: {
    type: Number,
    default: 0,
  },
  // 展示页数
  pageSize: {
    type: Number,
    default: 0,
  },
  //总页数
  totalNum: {
    type: Number,
    default: 0,
  },
  //多选
  handleSelection: {
    type: Function,
    default: () => {},
  },
});
// // 测试列宽
// /**
//  * el-table扩展工具  -- 列宽度自适应
//  * @param {*} prop 字段名称(string)
//  * @param {*} records table数据列表集(array)
//  * @returns 列宽(int)
//  */
// function getColumnWidth(prop: string, records: any) {
//   const minWidth = 80; // 最小宽度
//   const padding = 12; // 列内边距
//   const contentWidths = records.map((item: any) => {
//     console.log("item", item);
//     console.log("PROP", prop);
//     const value = item[prop] ? String(item[prop]) : "";
//     const textWidth = getTextWidth(value);
//     return textWidth + padding;
//   });
//   console.log("contentWidths", contentWidths);
//   let maxWidth = Math.max(...contentWidths);
//   if (maxWidth > 240) {
//     maxWidth = 240;
//   }
//   return Math.max(minWidth, maxWidth);
// }
// /**
//  * el-table扩展工具  -- 列宽度自适应 - 获取列宽内文本宽度
//  * @param {*} text 文本内容
//  * @returns 文本宽度(int)
//  */
// function getTextWidth(text: string) {
//   const span = document.createElement("span");
//   span.style.visibility = "hidden";
//   span.style.position = "absolute";
//   span.style.top = "-9999px";
//   span.style.whiteSpace = "nowrap";
//   span.innerText = text;
//   document.body.appendChild(span);
//   const width = span.offsetWidth + 5;
//   document.body.removeChild(span);
//   return width;
// }
// ...其他方法
const emit = defineEmits([
  "pagination",
  "update:currentPage",
  "update:pageSize",
  "selection-change",
]);
const page = useVModel(props, "currentPage", emit);
const size = useVModel(props, "pageSize", emit);
function handleSizeChange(val: number) {
  emit("pagination", { currentPage: page, pageSize: val });
}
function handleCurrentChange(val: number) {
  // console.log("val", val);
  page.value = val;
  emit("pagination", { currentPage: val, pageSize: props.pageSize });
}
const handleSelectionChange = (val: any) => {
  emit("selection-change", val);
};
const handleSelectable = (row: any) => {
  // console.log("row", row);
  return row.selectable;
};
</script>
<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: end;
  padding: 12px;
  margin-top: 5px;
  &.hidden {
    display: none;
  }
}
</style>

/**
 * el-table扩展工具  -- 列宽度自适应
 * @param {*} prop 字段名称(string)
 * @param {*} records table数据列表集(array)
 * @returns 列宽(int)
 */
export function getColumnWidth(label: string, prop: string, tableData: any) {
  //label表头名称
  //prop对应的内容
  //tableData表格数据
  const minWidth = 90; // 最小宽度
  const padding = 10; // 列内边距
  const arr = tableData.map((item: any) => item[prop]);
  arr.push(label); //拼接内容和表头数据
  const contentWidths = arr.map((item: any) => {
    // console.log("item", item);
    // console.log("PROP", prop);
    const value = item ? String(item) : "";
    const textWidth = getTextWidth(value);
    return textWidth + padding;
  });
  // console.log("contentWidths", contentWidths);
  let maxWidth = Math.max(...contentWidths);
  if (maxWidth > 240) {
    maxWidth = 240;
  }
  return Math.max(minWidth, maxWidth);
}
/**
 * el-table扩展工具  -- 列宽度自适应 - 获取列宽内文本宽度
 * @param {*} text 文本内容
 * @returns 文本宽度(int)
 */
function getTextWidth(text: string) {
  const span = document.createElement("span");
  span.style.visibility = "hidden";
  span.style.position = "absolute";
  span.style.top = "-9999px";
  span.style.whiteSpace = "nowrap";
  span.innerText = text;
  document.body.appendChild(span);
  const width = span.offsetWidth + 5;
  document.body.removeChild(span);
  return width;
}