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;
}