在标准化项目封装组件是十分重要，例如大部分后台管理系统中，例如一个table会在多个页面复用，这时候我们就应该想到用封装来完成，这样较少cv，提高效率
例如此处就是后台管理系统中用到table的页面，在多个页面中重复用到
在上述中我们可以看到如果不封装这个table，一直复制粘贴是很麻烦，下面我就来封装这个table
1, 此处就是在user.vue就是点击导航栏的选项出现的页面，在这里我们就可以进行封装table,最终效果，这个user.vue页面是不是十分清晰,只有几行代码。
2，此处我们可以建立一个content.config.js，里面是存放一些table配置，在element ui中的table组件是这么用的，里面有很多个el-table-column，但是如果有很多列的话，我们每个都这么写，是不是感觉很多余呢，vue中提供一个v-for给我们，我们就可以巧妙的运用这个指令对el-form做二次封装
思路：首先呢，el-table-column都用到prop label width一些配置，因为我们可以将用的这些配置在另外一个js里面封装起来，然后导入加进去，做遍历这样是不是就十分清晰了呢
export const ContentConfig = { title: '用户名',//插槽 propList: [ { prop: 'name', label: '用户名', minwidth: '100' }, { prop: 'realname', label: '真实姓名', minwidth: '100' }, { prop: 'cellphone', label: '手机号码', minwidth: '100' }, { prop: 'enable', label: '状态', minwidth: '100', slotName: 'status' }, { prop: 'createAt', label: '创建时间', minwidth: '250', slotName: 'createAt' }, { prop: 'updateAt', label: '更新时间', minwidth: '250', slotName: 'updateAt' }, { label: '操作', slotName: 'handler' } ] }
3， 我们接下来在在封装一个组件我们将它命名为table.vue,它的代码结构可以分成头部，中间，底部，头部就是用来描述标题的，而底部使用分页器的
header我们里面可以存放slot在自定义要显示的内容
底部fotter
中间为table，因为下面就是这个页面整体结构
接下来我们就解释
el-table就是element ui的组件，我们先来解释一下这个组件的几个常用属性,data使用来传输数据 style用来写样式的 align是居中
el-table-colum我们就可以v-for根据配置来循环
以上在这里我们做了二次封装，生成了自己的组件
然后呢我们在新建一个pageContent.vue组件用来存放我们所需要的列表
<template> <div class="PageContent"> <ZLtable v-bind="ContentConfig" :showIndexColumn="showIndexColumn" :showSelection="showSelection" :userList="userList"> <template #handerHandler> <el-button size='mini' type="primary">新建用户</el-button> <el-button size='mini' type="primary">刷新</el-button> </template> <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="handler-btn"> <el-button size="mini" type="text">编辑</el-button> <el-button size="mini" type="text">删除</el-button> </div> </template> </ZLtable> </div> </template>
此处我们是不是就十分清晰了？ 我们之前table组件中不是定义很多插槽吗，这里不就起作用了
<script>import {computed, ref} from "vue"; import {useStore} from "vuex"; import ZLtable from '@/base-ui/table' export default { props:{ ContentConfig:{ type:Object, required:true }, pageName:{ type:String, required:true } }, components:{ ZLtable }, setup(props){ const showIndexColumn=ref(true) const showSelection=ref(true) const store = useStore() store.dispatch('system/getPageListAction',{ pageName: props.pageName, queryInfo:{ offset: 0, size: 10 } }) const userList = computed(()=>store.state.system.userList) return { showIndexColumn,showSelection,userList } } } </script>
最后我们只需要在父组件里面放封装好的组件，然后传入配置即可
以上就是整个封装过过程
总的来说我画个图
我们在别的页面怎么使用呢
注意 最后我们很多可能忽略整个的作用
他是用来干嘛呢，其实他就是传入标识，来展示我们要获取哪种类型的数据
