element table 封装

先封装成组件，需要用到的页面直接引入

	<template>
		<el-table
              ref="sinoTableRef"
              v-bind="props.tableConfig.tableattributes"
              v-on="tableDefaultProps.tableEvent"
              height="100%"
              style="width: 100%"
              :border="true"
            >
              <component
                v-for="(item, index) in tableDefaultProps.tableColumnAttributes"
                :key="index"
                v-bind="item"
                :is="'ElTableColumn'"
              >
              </component>
              <slot name="customTableSlot"></slot>
         </el-table>
	</template>

<script setup>
import { computed, ref } from "vue";
const props = defineProps({
		  tableConfig: {
    		type: Object,
    		default: () => {
      			return {};
    		},
    		requird: false,
  		},
})
//这一步如果配置不需要默认值可以省略，直接用props.tableConfig
const tableDefaultProps = computed(() => {
  return Object.assign(
    {
      // 是否显示自定义table表格
      customTable: false,
      // 是否显示loading
      loading: false,
      /**
       * 详见element-plus  Table-column 配置
       * 所有下划线连接替换为驼峰模式 例:
       * column-key 替换为 columnKey
       * */
      tableColumnAttributes: [],
      /**
       * 详见element-plus  table attribute配置
       * 所有下划线连接替换为驼峰模式 例:
       * max-height 替换为 maxHeight
       * */
      tableattributes: {
        data: [],
      },
      /**
       * 详见element-plus table event配置
       *  驼峰替换下划线 例:
       * selection-change 替换为 selectionChange
       * */
      tableEvent: {},
    },
    props.tableConfig
  );
});
</script >

使用组件

<template>
	<customTable :tableConfig="tableDefaultProps ">
		 <!-- table表格自定义内容插槽 -->
   	<template #customTableSlot>
      <el-table-column label="自定义内容">
        <template #default="scope">
          {{ scope.row }}
        </template>
      </el-table-column>
    </template>
	</customTable>
</template>

<script setup>
import advancedSearchTpl from "customTable.vue";
const tableDefaultProps = reactive({
  loading: false,
  tableColumnAttributes: [
    {
      type: "index",
    },
    {
      prop: "date",
      label: "Date",
    },
    {
      prop: "name",
      label: "Name",
    },
    {
      prop: "address",
      label: "Address",
    },
  ],
  tableattributes: {
    data: [],
  },
  tableEvent: {
    onSelectionChange(val) {
      console.log(val);
    },
  },
});
</script >

小结：也可以使用render实现同样的功能， 具体实现可以点击查看

同理使用这种办法可以封装tree,form等