html-4 路径

路径


相对路径


同一级:直接写名字             <img src="1.png"/>
下一级:文件夹名字/图片名字    <img src="images/1.png">
上一级:../图片名              <img src="../1.png"/>

绝对路径\\\\


第一种,从盘符开始,不方便跨机器使用
第二种,网络盗图
<img src="https://i0.hdslb.com/bfs/sycp/creative_img/202007/2e1b9e128d9b47c3a72337cbe6481bd5.jpg"/>

el-tree获取路径信息的方法如下: 1. 使用el-tree的node-key属性来设置每个节点的唯一标识符。 2. 使用el-tree的current-node-key属性来设置当前选中的节点的唯一标识符。 3. 使用el-tree的getCheckedNodes方法获取所有选中的节点。 4. 使用el-tree的getNode方法根据节点的唯一标识符获取节点对象。 5. 使用递归的方式获取当前选中节点的所有父节点,直到根节点为止。 6. 将获取到的父节点按照路径顺序进行拼接,即可得到路径信息。 以下是一个示例代码: ```html <template> <el-tree :data="treeData" :node-key="nodeKey" :current-node-key="currentNodeKey" @node-click="handleNodeClick" ></el-tree> </template> <script> export default { data() { return { treeData: [ { id: 1, label: 'Node 1', children: [ { id: 2, label: 'Node 1-1', children: [ { id: 3, label: 'Node 1-1-1', }, ], }, { id: 4, label: 'Node 1-2', }, ], }, { id: 5, label: 'Node 2', }, ], nodeKey: 'id', currentNodeKey: null, }; }, methods: { handleNodeClick(data) { this.currentNodeKey = data[this.nodeKey]; const path = this.getPath(data); console.log('Path:', path); }, getPath(node) { const path = []; this.getParentPath(node, path); return path.reverse().join(' > '); }, getParentPath(node, path) { if (node) { path.push(node.label); const parentNode = this.$refs.tree.getNode(node[this.nodeKey]); this.getParentPath(parentNode.parent, path); } }, }, }; </script> ``` 在上述示例中,我们使用了el-tree组件来展示树形结构的数据,并通过设置node-key属性来指定节点的唯一标识符。在点击节点时,我们通过handleNodeClick方法获取当前选中的节点,并调用getPath方法来获取路径信息。getPath方法使用递归的方式获取当前节点的所有父节点,并将路径信息按照顺序进行拼接。最后,我们将路径信息打印到控制台上。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值