vue3+elementPlus 模板页面

来源：1-1 课程介绍（导学）

慕哥1464485

2022-02-17

老师你好，请教一个问题，就如一个后台管理系统，每个页面的布局都相同（包含查询条件、还有一个table,以及分页），就想写一个模板页面，如下图图片描述
但是当我使用这个模板页面的时候就会出现这样的问题，不知道怎么处理，如下图
1、上面这样的处理是否合理，这里的处理是不是需要参考本课程中的ValidateForm和ValidateInput的做法；
2、这样的设计是否合理，如果不合理，希望老师指点一下，提供一下思路也可以

写回答

1回答

张轩

2022-02-18

已采纳

同学你好

既然多个页面布局都一样只是数据源不一样那么为什么要传入一个 slot 呢？我觉得应该只要传入不同的数据源就可以了，然后操作都一样的。

比如, 简化

<TemplatePage dataSource="/users" :fields="['id', 'name', 'email']">
<TemplatePage dataSource="/items" :fields="['id', 'itemName', 'price']">

// 然后这个组件中，做到这几个接口数据格式都一样
然后在不同的操作时候发送请求就可以了

张轩

慕哥1464485

假如定制化程度很高也可以使用 slot，使用 named slot 就可以了，它可以将组件内部的变量传递给父组件的slot当中去，可以看文档 https://vuejs.org/guide/components/slots.html#scoped-slots 假如定制化不高，可以使用 tag 属性，传入类型，比如 select 或者 input 等等。

2022-02-19

共2条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目，率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程

相似问题

vue2 - vue3

回答 1

App.vue文件差异

回答 1

vue3 this的问题

回答 1

第一次加载columnDetail页面，可以从store获取到column & posts，但刷新columnDetail页面store中的数据丢失

回答 1

回答 1

打开慕课网App查看更多内容