该文章管理也是引用由 components文件夹下的 PageContainer 文件来的,在PageContainer中设置来 父传子,通过文章管理页面传递过去标题,具名插槽设置是否需要button按钮,以及默认插槽传递内容。
通过在 el-form表单中 添加 inliine属性,使得3个item 项 并排一行,默认是 true不写
对表格区域进行渲染, 直接定义响应结果中的 data数据,然后进行渲染
渲染文章标题下的列的内容,均为链接,并且无下划线
操作,用到作用域插槽
element-plus中下拉菜单里边提示是英文,如果希望是中文,需要进行配置
因为希望是所有都要配置为中文,所以在 app.vue组件中配置
文章管理该组件中的文章分类需要使用到 下拉菜单,需要请求后台数据动态渲染,跟ArticleChannel文章分类相关,以后也会需要使用到下拉菜单选择分类。所以直接封装为一个组件
子组件ChannelSelect 想要实现动态渲染双向绑定 请求参数中的 id,也就是父传子并且还要实现双向绑定,对于父子的双向绑定,使用到 :modelValue和 @update:modelValue。通过在 子组件 defineProps中用 modelValue进行接收,然后直接 :modelValue=”modelValue“ 进行绑定,要想子组件中下拉菜单里的选中内容变化并且父组件中 params 内容跟着变化(也就是子传父),那么通过 @update:modelValue=”emit(‘@update:model’,$event)“进行监听modelValue并进行子传父
vue3中的 v-model = ”params.cate_id“在子组件标签中 其实是 v-model:modelValue= "params.cate_id" ,这就是默认形式。
当然,也可以不是默认形式,例如在子组件标签中是 v-model : cid = "params.cate_id", 那么在子组件中双向绑定也就是 :cid 和 @update:cid。父传子接受的地方也就是变成了 cid
完成下拉菜单组件之后进行渲染 。
先封装接口
接着请求数据并进行渲染
在之前已经有写死的数据,然后进行了渲染了。只不过现在的数据是请求回来的而不是自己定义的,渲染部分就不用写了
请求回来的时间 结构比较乱,所以在工具夹utils中创建了一个模块 format来进行时间的格式化
然后作用域插槽来渲染时间,也不用删除 prop,如果配置了默认插槽那么就以默认插槽为主。因为不是直接渲染(prop),所以不是直接将format 直接往 prop中调
分页
官网 cv , 然后编写 每页条数变化和当前页变化的处理渲染逻辑