Vue3学习（十九） – TreeSelect 树选择

Vue3学习（十九） – TreeSelect 树选择已关闭评论
94 次浏览

A+

所属分类：Web前端

摘要

我知道自己现在的状态很不好，以为放个假能好好放松下心情，结果昨晚做梦还在工作，调试代码，和领导汇报工作。

便宜好用的国外VPS推荐

Vue3学习（十九） - TreeSelect 树选择

写在前面

我知道自己现在的状态很不好，以为放个假能好好放松下心情，结果昨晚做梦还在工作，调试代码，和领导汇报工作。
Vue3学习（十九） - TreeSelect 树选择

天呐，明明是在放假，可大脑还在考虑工作的事，我的天那，这是怎么了？

Vue页面参数传递

1、任务拆解

页面跳转时带上当前电子书id参数ebookId
新增/编辑文档时，读取电子书id参数ebookId

2、页面跳转带当前页面的ID

啥意思呢，就是你点哪条数据发生页面跳转时，需要带上当前你操作的id，也就是在路由上拼接上你的ID即可，示例代码如下：

<router-link :to="'/admin/admin-doc?ebookId='+record.id">   <a-button type="primary">     文档管理   </a-button> </router-link>

3、新增/保存时读取电子书id

这块可以理解为，你编辑或者新增的时候，都会调用保存接口吧，你得告诉接口，你针对哪条数据进行操作对吧，或者得知道你从哪条数据过来的触发的编辑和新增吧，示例代码如下：

  /**    * 新增    */   const add = () => {     open.value = true;     doc.value = {       ebookId: route.query.ebookId     };     treeSelectData.value = Tool.copy(level1.value);     // 为选择树添加一个"无"     treeSelectData.value.unshift({id: 0, name: '无'});   };

知识点：

doc.value = {ebookId: route.query.ebookId};，解决新增时电子书ID不能为空提示
record.ebookId=route.query.ebookId，解决编辑时提示电子书ID不能为空提示
使用route来获取当前路由的信息

import { useRoute } from 'vue-router'    const route = useRoute(); console.log("路由：", route); console.log("route.path：", route.path); console.log("route.query：", route.query); console.log("route.fullPath：", route.fullPath); console.log("route.param：", route.params); console.log("route.name：", route.name); console.log("route.meta：", route.meta);