海口顶尖网站建设,巴中市文旅新区关坝片区安置房建设项目,苏州哪个网站建设最好,建工网查询19vue3实战-----菜单子树的展示 1.实现目标2.实现思路3.实现步骤3.1新建config配置文件3.2封装组件3.3使用组件 1.实现目标 如上,以上效果的难点是“在表格里面实现树形结构”。可以用element-plus框架中的table作为辅助: 可以自己查看文档了解怎么使用。
2.实现思路
上面的… 19vue3实战-----菜单子树的展示 1.实现目标2.实现思路3.实现步骤3.1新建config配置文件3.2封装组件3.3使用组件 1.实现目标 如上,以上效果的难点是“在表格里面实现树形结构”。可以用element-plus框架中的table作为辅助: 可以自己查看文档了解怎么使用。
2.实现思路
上面的效果不难实现,无非就是搭建界面。这里我不用常规方法“一个一个页面搭建”而是用之前写的文章https://blog.csdn.net/fageaaa/article/details/145572470中的方法--------通过配置生成页面。
3.实现步骤
3.1新建config配置文件
在menu文件夹下新建config配置文件: menu/config/content.config.ts
const contentConfig {pageName: menu,header: {title: 菜单列表,btnTitle: 新建菜单},propsList: [{ label: 菜单名称, prop: name, width: 180px },{ label: 级别, prop: type, width: 120px },{ label: 菜单url, prop: url, width: 150px },{ label: 菜单icon, prop: icon, width: 200px },{ label: 排序, prop: sort, width: 120px },{ label: 权限, prop: permission, width: 150px },{ type: timer, label: 创建时间, prop: createAt },{ type: timer, label: 更新时间, prop: updateAt },{ type: handler, label: 操作, width: 150px }],childrenTree: {rowKey: id,treeProps: {children: children}}
}
export default contentConfig3.2封装组件
将各种各样的表格所在的内容区域封装为一个组件: components/page-content/page-content.vue:
templatediv classcontentdiv classheaderh3 classtitle{{ contentConfig?.header?.title ?? 数据列表 }}/h3el-button typeprimary clickhandleNewUserClick{{ contentConfig?.header?.btnTitle ?? 新建数据 }}/el-button/divdiv classtableel-table:datapageListborderstylewidth: 100%v-bindcontentConfig.childrenTreetemplate v-foritem in contentConfig.propsList :keyitem.proptemplate v-ifitem.type timerel-table-column aligncenter v-binditemtemplate #defaultscope{{ formatUTC(scope.row[item.prop]) }}/template/el-table-column/templatetemplate v-else-ifitem.type handlerel-table-column aligncenter v-binditemtemplate #defaultscopeel-buttonsizesmalliconEdittypeprimarytextclickhandleEditBtnClick(scope.row)编辑/el-buttonel-buttonsizesmalliconDeletetypedangertextclickhandleDeleteBtnClick(scope.row.id)删除/el-button/template/el-table-column/templatetemplate v-else-ifitem.type customel-table-column aligncenter v-binditemtemplate #defaultscopeslot:nameitem.slotNamev-bindscope:propitem.prophNamewhy/slot/template/el-table-column/templatetemplate v-elseel-table-column aligncenter v-binditem //template/template/el-table/divdiv classpaginationel-paginationv-model:current-pagecurrentPagev-model:page-sizepageSize:page-sizes[10, 20, 30]layouttotal, sizes, prev, pager, next, jumper:totalpageTotalCountsize-changehandleSizeChangecurrent-changehandleCurrentChange//div/div
/templatescript setup langts
...
interface IProps {contentConfig: {pageName: stringheader?: {title?: stringbtnTitle?: string}propsList: any[]childrenTree?: any}
}const props definePropsIProps()
...
/scriptstyle langless scoped
...
/style
3.3使用组件
templatediv classmenupage-content :content-configcontentConfig //div
/templatescript setup langts namemenu
import PageContent from /components/page-content/page-content.vue
import contentConfig from ./config/content.config
/scriptstyle scoped
...
/style
