//只写了最基础的
import { defineComponent, toRefs, PropType } from "vue";
type slotFunction = (scope: Record<string, unknown>) => JSX.Element;
interface TableConfig {
  props?: Record<string, unknown>; //el-table-column props
  header?: slotFunction;
  default?: slotFunction;
export default defineComponent({
  name: "mytable",
  props: {
    configs: {
      type: Array as PropType<TableConfig[]>,
      required: true,
  setup(props, { attrs, slots }) {
    // 注意：在vue3中 $listener仅是以on开头的attrs
    const { configs } = toRefs(props);
    const columns = configs.value.map((item) => {
      const slots = { ...item };
      delete slots.props;
      return (
        <el-table-column {...item.props} v-slots={slots}></el-table-column>
    });
    return () => (
      <el-table {...attrs} v-slots={{ ...slots, default: columns }}></el-table>
});
<template>
  <tableCom
    :configs="configs"
    :data="tableDate"
    @cell-mouse-enter="mouseEnter"
    @selection-change="handleSelectionChange"
    <template #append
      ><p style="text-align: center; line-height: 50px" v-loading="loading">
        <a href="javascript:;" class="blue01">点击加载更多</a>
    </template>
  </tableCom>
</template>
<script lang="ts">
import tableCom from "@/components/my-table";
import _configs from "./tables";
import { ref, defineComponent } from "vue";
console.log("_configs:", _configs);
export default defineComponent({
  components: { tableCom },
  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
  setup() {
    const multipleSelection = ref<InstanceType<typeof Array>>([]);
    const handleEdit = () => {
      console.log("handleEdit");
    const handleSelectionChange = (val: Array<unknown>): void => {
      console.log("handleSelectionChange");
      multipleSelection.value = val;
    const configs = _configs({ handleEdit, handleSelectionChange });
    const tableDate = ref([
        date: "2016-05-02",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1518 弄",
        date: "2016-05-04",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1517 弄",
        date: "2016-05-01",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1519 弄",
        date: "2016-05-03",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1516 弄",
    ]);
    setTimeout(() => {
      tableDate.value = [
          date: "2016-05-02",
          name: "王小虎111",
          address: "上海市普陀区金沙江路 1518 弄",
          date: "2016-05-04",
          name: "王小虎111",
          address: "上海市普陀区金沙江路 1517 弄",
          date: "2016-05-01",
          name: "王小虎111",
          address: "上海市普陀区金沙江路 1519 弄",
          date: "2016-05-03",
          name: "王小虎111",
          address: "上海市普陀区金沙江路 1516 弄",
    }, 1000);
    const mouseEnter = () => {
      console.log("mouseEnter");
    return {
      configs,
      tableDate,
      mouseEnter,
      handleSelectionChange,
});
</script>
<style></style>
//table.tsx
import { TableConfig } from "@/components/my-table/index";
interface vm {
  [propertys: string]: (arg: any) => any;
export default function (vm: vm): TableConfig[] {
  return [
      props: {
        type: "selection",
        width: "55",
      props: { prop: "date", label: "商品ID" },
      props: {
        prop: "name",
        label: "商品",
      props: {
        prop: "anctions",
        label: "操作",
      header: (scope) => {
        console.log(scope);
        return <>haha</>;
      default: (scope) => {
        console.log(scope);
        const editButton = () => {
          vm.handleEdit(scope.row.id);
        const deleteButton = () => {
          vm.deleteShop(scope.row.id);
        return (
          <el-row>
            <el-button size="mini" onClick={editButton}>
            </el-button>
            <el-button size="mini" onClick={deleteButton}>
            </el-button>
          </el-row>
                                    上篇table 表格封装 讲到项目中经常会用到 table 表格，所以做了封装。当然，form 表单使用的频率依然很高，所以和封装 table 表格的思路相似，对 form 表单也做了一个二次封装的组件。
 Form 表单组件封装
2. 基本表单使用
3. 自定义 key
4. 自定义表单验证
 表单配置项， 参数请参考下面参数介绍
 参数类型声明(声明为全局的类型，方便使用)
Form 属性
                                    2.列的显示隐藏控制，默认根据接口数据是否有返回绑定prop对应的字段，来实现列的权限控制显隐，也可通过外部传tableHeader来自行控制。1.统一样式，通过slot插槽而非json配置项的形式，来兼容原有table的template写法，方便改造。
在项目中很常见的交互：回显表单信息 + 验证表单 + 提交表单信息,而表单的类型也有很多（复选框，单选框，下拉框，输入框，文本框等等等）如果多个页面都有表单验证的交互且表单的内容不一样，难道我们就要去写多个表单组件吗？？？那该怎么办呢？？？？
根据element-ui 的Form表单组件，写了一个公共的组件，可以满足大多数的表单类型的验证，做的这个组件主要是以弹窗的形式在页面上展示
主要的功能：
-显示弹窗（根据传入的数据来决定来显示表单）
-验证表单信息
-提交表单信息
- 具体代码