父组件和配置文件

因为是封装的原因，所以只要看:<page-content />组件和配置文件contentTableConfig

user.vue

<template> <div class="user"> <page-content :cOntentTableConfig="contentTableConfig" pageName="users" ></page-content> </div> </template> <script lang="ts"> import { defineComponent } from "vue"; //引入展示 table 组件 import PageContent from "@/components/page-content"; //引入展示 table 组件的数据和配置 import { contentTableConfig } from "./config/content.config"; export default defineComponent({ name: "users", components: { PageContent }, setup() { return { contentTableConfig }; } }); </script> <style scoped> .content { padding: 20px; border-top: 20px solid #f5f5f5; } </style> 

content.config.ts

export const cOntentTableConfig= { title: "用户列表", propList: [ { prop: "name", label: "用户名", minWidth: "100" }, { prop: "realname", label: "真实姓名", minWidth: "100" }, { prop: "cellphonne", label: "电话号码", minWidth: "200" }, { prop: "enable", label: "状态", minWidth: "100", slotName: "status" }, { prop: "createAt", label: "创建时间", minWidth: "230", slotName: "createAt" }, { prop: "updateAt", label: "更新时间", minWidth: "230", slotName: "updateAt" }, { label: "操作", minWidth: "120", slotName: "handler" } ], showIndexColumn: true, showSelectColumn: true }; 

子组件

page-content.vue

<template> <div class="page-content"> <hy-table v-bind="contentTableConfig" :listData="dataList"> <!-- 1.header 中的插槽 --> <template #headerHandler> <el-button type="primary" size="medium">新建用户</el-button> </template> <!-- 2.列中的插槽 --> <template #status="scope"> <el-button plain size="mini" :type="scope.row.enable ? 'success' : 'danger'" > {{ scope.row.enable ? "启用" : "禁用" }} </el-button> </template> <template #createAt="scope"> <span>{{ $filters.formatTime(scope.row.createAt) }}</span> </template> <template #updateAt="scope"> <span>{{ $filters.formatTime(scope.row.updateAt) }}</span> </template> <template #handler> <div class="handle-btns"> <el-button icon="el-icon-edit" size="mini" type="text" >编辑</el-button > <el-button icon="el-icon-delete" size="mini" type="text" >删除</el-button > </div> </template> </hy-table> </div> </template> <script lang="ts"> import { defineComponent, computed } from "vue"; import { useStore } from "@/store"; import HyTable from "@/base-ui/table"; export default defineComponent({ components: { HyTable }, props: { contentTableConfig: { //配置文件，这个要传给子组件 HyTable type: Object, require: true }, pageName: { type: String, required: true } }, setup(props) { const dataList = computed(() => store.getters[`system/pageListData`](props.pageName) ); return { dataList }; } }); </script> <style scoped> .page-content { padding: 20px; border-top: 20px solid #f5f5f5; } </style> 

HyTable.vue

<template> <div class="hy-table"> <div class="header"> <slot name="header"> <div class="title">{{ title }}</div> <div class="handler"> <slot name="headerHandler"></slot> </div> </slot> </div> <el-table :data="listData" border style="width: 100%" @selection-change="handleSelectionChange" > <el-table-column v-if="showSelectColumn" type="selection" align="center" width="60" ></el-table-column> <el-table-column v-if="showIndexColumn" type="index" label="序号" align="center" width="80" ></el-table-column> <template v-for="propItem in propList" :key="propItem.prop"> <el-table-column v-bind="propItem" align="center"> <template #default="scope"> <slot :name="propItem.slotName" :row="scope.row"> {{ scope.row[propItem.prop] }} </slot> </template> </el-table-column> </template> </el-table> <div class="footer"> <slot name="footer"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" > </el-pagination> </slot> </div> </div> </template> <script lang="ts"> import { defineComponent, PropType } from "vue"; export default defineComponent({ props: { listData: { type: Array, required: true }, title: { //通过 page-content 组件传过来的 contentTableConfig 对象的属性会不会自动解析，是不是这儿出问题了？ type: String, default: "" }, propList: { type: Array as PropType<any[]>, required: true }, showIndexColumn: { type: Boolean, default: false }, showSelectColumn: { type: Boolean, default: false } }, emits: ["selectionChange"], setup(props, { emit }) { const handleSelectiOnChange= (value: any) => { emit("selectionChange", value); }; const handleSizeChange = () => { return; }; const handleCurrentChange = () => { return; }; return { handleSelectionChange, handleSizeChange, handleCurrentChange }; } }); </script> <style scoped lang="less"> .header { display: flex; height: 45px; padding: 0 5px; justify-content: space-between; align-items: center; .title { font-size: 20px; font-weight: 700; } .handler { align-items: center; } } .footer { margin-top: 15px; .el-pagination { text-align: right; } } </style> 

演示 contentTableConfig 传输过程

• 1.通过 import 导入到 user.vue 里，给 page-content.vue 子组件传过去
• 2.组件 page-content.vue 继续把 contentTableConfig 传递给子组件 HyTable.vue
• 3.然后 HyTable.vue 组件解析

显示错误的图片

问题出在哪儿了？