Ant Desgin Vue Tree Tab 个性化需求

背景

个人对前端不是很熟,或者说过目就忘,但是对前端还要求不少,这就难搞了。

使用的前端是Mudblazor和ant design vue, Mudblazor 还没有开始搞,现在先用ant design vue,版本是vue3, ant design vue 4+版本

组织管理需要两个功能,一个是左边组织树,需要点击后出现菜单,或者右键点击菜单(这个本身有);网上有各种需求,比如以下三种,都是那么个意思,但都不是,

我要的效果类似于这个

这个行政组织 左边有icon,右边是三个点,可以个性化,然后是下拉菜单。

另外一个就是tab页面,右上角自己有一坨东西,如下:

tab页面的右边,定义一堆查询的内容,对应不同的标签。

解决方案

Tree

于是乎搜索,第一个功能,tree,第一搜索现在的产品实现,用的navie ui, 其有一坨的api,我看见一个工程师实现的一坨,有render,有h函数,相当复杂,如果有时间,我会梳理其实现逻辑,好处是能对vue的渲染和组件有更输入的了解,一个组件就够了,缺点是写的确实一坨;这个思路应该没有问题的,网上很快找了一个实现,是使用插槽,于是乎读读插槽的基本内涵,有两个实现貌似不错,一个是掘金的老师,一个是csdn,如下片段

<a-tree
:tree-data="treeData"
@select="onSelect"
><template slot="custom" slot-scope="item">         <span>{{ item.fVcGroupName }}</span>       <!-- 新增同级 -->
<a-icon v-show="!item.isPeople" type="plus" class="iconplus " @click="changeFulevel(item)" />

于是乎,各种插槽使劲,把各种代码复制粘贴,该死的一直报错,最后弄了个干净环境还是错误,主要是对前端不熟,想着赶快解决问题over,最后发现,现在最新的版本api对于slot不支持了好像,人家给的代码就可能参考,直接是使用<template,如下:

  <a-tree :treeData="treeData" @select="myselect"><template  #title="{ title, area }" ><p><span>{{ title }}</span><span style="margin-left: 200px;">{{ area }}㎡</span>      <span v-show="title == '101'"  >{{ title }}</span></p></template>
</a-tree>

是的直接撸模板就行, 然后在select,设置icon是否可见,把对应的icon事件再进行绑定,逻辑就是如此。具体还未实现,但是技术验证是没有问题的。

Tab

对于这个需求,本来以为想找前端探讨一下,估计比较坏的打算是去编译tab代码,自己修订,或者看前端是否有什么奇技淫巧,实在不行再去改人家代码,不过万幸的是,人家工程师是见过世面的,有这个属性,点赞

<a-tab-pane key="6" tab="靠右公共操作">Content of Tab Pane 3</a-tab-pane><template #tabBarExtraContent><a-button type="primary" preIcon="mdi:page-next-outline">某个按钮,或者一坨组件</a-button></template></a-tabs>

思考

  1. 技术问题,如果有时间,还是比较踏实的读读原理,做做试验;真的是砍柴不误磨刀功。
  2. 解决问题,前后文一定清楚,别随意搜,自己理基本思路,看api,这可能是最快。
  3. 搜的时候,注意版本问题,还有目标问题。
  4. 最后感慨一下,大厂做的产品貌似还是比一般产品做的好些,思考的深度够,需要多向他们学习,尽量用他们的产品 。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/809698.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

经典面试:MySQL的锁机制,表级锁和行级锁的使用场景及解决方案

大家好&#xff0c;今天我们来聊一聊MySQL中的锁机制&#xff0c;特别是表级锁和行级锁的使用场景和解决方案。锁机制是数据库管理系统中用来确保数据一致性和完整性的重要工具。MySQL为我们提供了多种锁机制&#xff0c;每种锁都有其特定的使用场景和注意事项。 一、MySQL的锁…

webpack打包携带某个文件到dist目录

在 Webpack 配置文件 webpack.config.js 中&#xff0c;可以使用 CopyWebpackPlugin 插件实现将特定文件复制到dist目录&#xff1b;安装 CopyWebpackPlugin 插件&#xff1b; npm install copy-webpack-plugin --save-dev 在 webpack.config.js 中引入 CopyWebpackPlugin 插件…

CentOS 7下Vim常用工作模式详解

CentOS 7下Vim常用工作模式详解 在Linux系统中,Vim是一款功能强大的文本编辑器,被广大开发者所青睐。CentOS 7作为广泛使用的Linux发行版,Vim自然也是其标准配置之一。本文将详细介绍CentOS 7下Vim的常用工作模式及其相关命令选项和格式,帮助读者更好地掌握Vim的使用技巧。…

OSPF 开放式最短路径优先协议

目录 技术产生原因&#xff1a;因为RIP存在不足 OSPF优点&#xff1a; RIPV2和OSPFV2比较&#xff1a; 相同点&#xff1a; 不同点&#xff1a; OSPF的结构化部署 --- 区域划分 区域划分的主要目的&#xff1a; 区域边界路由器 --- ABR &#xff1a; 区域划分的要求&am…

【静态分析】静态分析笔记03 - 数据流分析(应用)

参考&#xff1a; 【课程笔记】南大软件分析课程3——数据流分析应用&#xff08;课时3/4&#xff09; - 简书 ---------------------------------------------------------------------------- 1. 数据流分析总览 may analysis: 输出可能正确的信息&#xff08;需做 over-…

【感谢】心怀感恩,共赴知识之旅——致每一位陪伴我突破百万总访问量的您

小伙伴朋友们&#xff1a; 此刻&#xff0c;我怀着无比激动与深深感激的心情&#xff0c;写下这篇特别的博文。今天&#xff0c;我的CSDN总访问量成功突破了百万大关&#xff0c;这不仅是一个数字的跨越&#xff0c;更是你们对我的支持、信任与鼓励的有力见证。在此&#xff0…

C语言学习笔记之操作符篇

目录 算术运算符 移位操作符 整型在内存中的存储&#xff08;补充知识&#xff09; ​编辑左移操作符 右移操作符 位操作符 赋值操作符 复合赋值操作符 单目操作符 关系操作符 逻辑操作符 && 与 || 的计算特点 条件操作符 逗号表达式 下标引用操作符 函…

Bert 将长段分成句子放在一个batch输入

from nltk.tokenize import RegexpTokenizersentence """Thomas Jefferson began building Monticello at the age of 26.""" # 按照自己的规则进行分词,使用正则分词器 # \w 匹配字母、数字、下划线 # 匹配任何非空白字符 tokenizer RegexpTo…

Canal 同步mysql 到es 日期格式报错解决

第一步&#xff1a;下载源码alibaba/canal: 阿里巴巴 MySQL binlog 增量订阅&消费组件 (github.com) 第二步&#xff1a;编辑源码&#xff08;client-adapter下面的clinet-adapter.escore)&#xff1a; com.alibaba.otter.canal.client.adapter.es.core.support.ESSyncUt…

聚丙烯PP它的化学特性是什么? UV胶水能够粘接聚丙烯PP吗?

聚丙烯PP它的化学特性是什么? UV胶水能够粘接聚丙烯PP吗&#xff1f; 聚丙烯&#xff08;Polypropylene&#xff0c;简称PP&#xff09;是一种热塑性聚合物&#xff0c;属于聚烯烃类塑料之一。以下是聚丙烯的一些化学特性&#xff1a; 1. 分子结构&#xff1a; 聚丙烯是由丙烯…

【赛题】2024年MathorCup数学应用挑战赛C题赛题发布

2024年MathorCup数学应用挑战赛——正式开赛&#xff01;&#xff01;&#xff01; C题 物流网络分拣中心货量预测及人员排班 赛题已发布&#xff0c;后续无偿分享各题的解题思路、参考文献、完整论文可运行代码&#xff0c;帮助大家最快时间&#xff0c;选择最适合是自己的赛…

[CSS]布局

盒子就是把网站分割成一小块一小块的吧&#xff0c;然后方便移动或者管理 背景 属性名描述background-color设置元素的背景颜色。background-image设置元素的背景图片。背景图片与背景颜色同时设置时&#xff0c;则图片覆盖颜色。写法如下&#xff1a;background-image: url(&…

2024年mathorcup数学建模思路及论文助攻

题目B 题 甲骨文智能识别中原始拓片单字自动分割与识别 甲骨文是我国目前已知的最早成熟的文字系统&#xff0c;它是一种刻甲或兽骨上的古老文字。甲骨文具有极其重要的研究价值&#xff0c;不仅对中国文明的起源具有重要意义&#xff0c;也对世界文明的研究有着深远影响。在我…

微信小程序-接入sse数据流并实现打字机效果( ChatGPT )

从流中获取的数据格式如下 小程序调用SSE接口 const requestTask wx.request({url: xxx, // 需要请求的接口地址enableChunked: true, // enableChunked必须为truemethod: "GET",timeout: 120000,success(res) {console.log(res.data)},fail: function (error) {//…

农场大乐斗游戏演示

功能介绍 农场系统 种菜操作&#xff1a;用户可以在农场中种植农作物&#xff0c;并进行浇水、杀虫、除草等维护操作。干旱、虫害、杂草都会影响农作物的生长速度和产量。农作物成熟后&#xff0c;用户需要及时收取&#xff0c;否则会在24小时后枯死&#xff0c;但可通过观看…

python通过url爬取视频资源到本地

很久之前我写过一篇通过url爬取图片地址的博文&#xff0c;说实在的&#xff0c;利用python实现自动化爬取资源确实很香。我本身是搞前端的。所以对py只是简单看了下&#xff0c;并不算多了解。因此之前写的那篇博文内容也很简单。简单到新手一看就会&#xff0c;一学就能用。方…

【C 数据结构】循环链表

文章目录 【 1. 基本原理 】【 2. 循环链表的创建 】2.1 循环链表结点设计2.2 循环单链表初始化 【 3. 循环链表的 插入 】【 4. 循环单链表的 删除操作 】【 5. 循环单链表的遍历 】【 6. 实例 - 循环链表的 增删查改 】【 7. 双向循环链表 】 【 1. 基本原理 】 对于单链表以…

刷代码随想录有感(29):用队列实现栈

不难理解&#xff0c;题干如下&#xff1a; 代码如下&#xff1a; class MyStack { public:queue<int> q;MyStack() {}void push(int x) {q.push(x);}int pop() {int size q.size();size--;while(size--){q.push(q.front());q.pop();}int res q.front();q.pop();retur…

大模型+知识库学习

参考&#xff1a;基于知识库和 LLM 的问答系统经验分享 - 知乎 (zhihu.com) 一、基于LLM的问答系统架构 比较常见的开源 LLM 的问答系统都会遵循下图这种结构去进行设计&#xff1a; 加载文件 -> 读取文本 -> 文本分割 -> 文本向量化 -> 问句向量化 -> 在文本…

kali桥接校园网实现上网

1.查看校园网信息 1. vim /etc/network/interfaces 添加下列信息&#xff0c;地址、网关、掩码和主机一样即可 3.vim /etc/resolv.conf 添加dns解析 4. /etc/init.d/networking restart 重启网络即可