element 表格

news2024/11/16 3:34:12

实现效果:

 需求:

1. 左侧新增分类功能添加数据到左侧分类表格中。

2. 分类表格可以编辑和删除。

3. 右侧添加标签功能,添加标签至所属分类中。

4.右侧表格显示分类与所挂在当前分类下的所有标签。

5. 右侧表格内删除按钮,删除数据之后,分类与标签的关联关系会取消。

6. 没有分类的情况下,搜索功能,添加标签功能不可以用。

左侧表格:

element 组件里面表格样式

都是这样:

 或者是这样的:

图形类似,但是需求想要的是 :

 中间没有竖线,但是两边有竖线。

用上面第二个表格,样式穿透,让中间的竖线变为白色,或者是display:none;隐藏掉也可以。

 新增,编辑好弄就不说了。

删除有小难点。

删除第一个分类,所挂标签关联关系都会取消。而且删除第一个分类,接下来显示的就是第二个分类。

删除最后一个分类就显示第一个分类。

 // 删除分类 - 确定
        seal(){
            let _this = this;
            console.log(_this.rows.id,`当前删除rows.id`);
            _this.id = _this.rows.id // 删除当前行的id
            let arr = []
            getHobbyList().then(res=>{
                 arr = res.data.data; 
                 console.log(arr,`当前`); 
                arr.forEach((item,index,obj)=>{
                //遍历删除id在数组中的下标位置
                if(_this.rows.id==item.id) {
                    console.log(index,_this.rows.id,item.id,obj.length,`index`);
                    // 1、只有一条数据
                    if(obj.length==1){
                        console.log(`我是仅有的一条数据`);
                        _this.id = undefined;
                        console.log(`我是仅有的一条数据`,_this.id);
                        return
                    }
                    // 2、删除第一条 
                    if(obj.length>1 && index==0){
                        console.log(`删除第一条`);
                        _this.id = obj[index + 1].id
                        console.log(`删除第一条`,_this.id);
                        return;
                    }
                    // 3、删除中间一条
                    if(index!=0 && index!=obj.length-1){
                        console.log(`删除的中间一条`);
                        _this.id = obj[index + 1].id
                        console.log(`删除的中间一条`,_this.id);
                        return;
                    }                  
                    // 4、删除最后一条
                    if(index!=0 && index==obj.length-1){
                        console.log(`删除的最后一条`);
                        _this.id = obj[index - 1].id
                        console.log(`删除的最后一条`,_this.id);
                        return;
                    }else{
                        console.log(`不知道删的哪一条`);
                        return;
                    }
                }
             })                           
            })

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

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

相关文章

C++之模板类指向子类对象(一百四十六)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生…

diy遥控飞机模型的基本要点-4

电调 电调(Electronic Speed Controller,简称ESC)是遥控飞机中的一种关键设备,用于控制电动马达的转速和方向。下面是关于电调的一些知识: 功能 速度调节:电调通过调整电流的大小和方向来控制电动马达的…

window系统安装node,配置环境变量npm指令

首先 你要在本地创建一个文件夹 来放node window我们直接访问node下载地址 根据自己的电脑配置 选择对应的版本 这里的话 我建议还是选择 .msi 文件 处理会方便一点 下砸好之后我们直接双击运行 然后 下一步 Next 然后 勾选下面的协议 然后 继续下一步 这个都没必要看 只能说…

Oracle-记OGG迁移项目问题与优化(5-6月)

背景: 5-6月使用oggexpdp将两套Oracle 11g从AIX7.1迁移到redhat7.9,数据量接近3T,本文主要记录ogg迁移过程中遇到的问题以及优化方法,希望对读者有所帮助 问题一:OGG数据一致性校验 使用OGG数据迁移,需要面对的一个大问题就是如何进行源端和目…

Java 实现关注微信公众号动态获取验证码

大家好,我是程序猿小张 前言 个人博客今天上线一个文章私密的功能,该功能需要通过关注公众号来获取验证码,通过正确的验证码才能来查阅文章,具体效果如下图。 我感觉还蛮有意思的就决定把这个写出来,供大家去使用&…

Web3.0数字货币有哪些?

Web3.0的到来为数字货币带来了全新的发展机遇,它不仅仅是加密货币的进化版,更是一种去中心化、可编程性和自治性的数字资产。 在这个新的数字经济时代,Web3.0数字货币成为了金融革命的核心。本文将介绍一些重要的Web3.0数字货币,…

基于SpringBoot+vue的新生宿舍管理系统设计与实

博主介绍: 大家好,我是一名在Java圈混迹十余年的程序员,精通Java编程语言,同时也熟练掌握微信小程序、Python和Android等技术,能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…

基于Servlet的CRM客户关系管理系统

1.需求分析 客户是公司最宝贵的资源,为了更好的发掘老客户的价值,并开发更多新客户,公司实施客户关系管理系统。系统的功能是:通过这个系统完成对员工基本信息、客户基本信息、交往信息、客户服务信息的充分共享和规范化管理;通过对销售机会、客户开发过程的追踪和…

服务器配置静态IP

服务器配置静态IP 一、前期准备二、配置静态IP 将服务器配置为使用静态IP地址。这将使服务器拥有一个永久的IP地址,而不会在每次启动时更改。为此,您需要编辑网络配置文件并将服务器的IP地址添加到其中。详细步骤如下: 一、前期准备 请在配置…

Docter容器

轻量,高效,敏捷 本质是进程,所以才轻量,namespace隔离资源,cgroups资源限制 namespace 运行容器,100个容器争夺资源, 给每个容器分配多少资源 审计:你利用多少资源?技…

免费的CRM软件都有哪些功能?

有哪些免费好用的CRM软件推荐?Zoho CRM是免费的CRM客户管理软件。虽然限制了部分功能,但是依然可以管理客户关系,提高销售效率,实现快速增长。 联系人管理: 创建和管理联系人,记录他们的基本信息、交易历…

阿里云短信平台收费标准价格表

阿里云短信服务平台,阿里云短信0.032元一条,阿里云短信?阿里云短信怎么收费?阿里云短信多少钱一条,阿里云短信0.032元一条。新用户购买阿里云短信套餐包6.9元200条起,费用0.032元/条,阿里云短信…

轻量级的CRM系统有哪些优势

市面上的CRM客户管理系统多种多样,但并不是所有的CRM系统都适合您的企业——有些CRM过于复杂和昂贵,初创或小型企业无法负担。那么,有哪些好用的轻量级在线CRM系统? Zoho Bigin是初创或小型企业设计的轻量级在线CRM系统&#xff…

联想小新电脑无法启动怎么办?

1,电脑启动不了 2,强制断电3次开机后,Win11进入高级启动模式 (注意每次强制关机要按住15秒左右) 3,选择疑难解答 4,选择高级选项 5,卸载更新 6,卸载最新的质量更新 7&am…

Spring Boot 中的 Spring Cloud Feign

Spring Boot 中的 Spring Cloud Feign Spring Boot 是一个非常流行的 Java Web 开发框架,它提供了很多工具和组件来简化 Web 应用程序的开发。其中,Spring Cloud Feign 是 Spring Boot 中的一个非常重要的组件,它可以帮助我们实现声明式的 R…

Git构建和Github的ssh配置

由于你的本地 Git 仓库和 GitHub 仓库之间的传输是通过SSH加密的,所以我们需要配置验证信息 ssh-keygen -t rsa -C "youremailexample.com" your_emailyouremail.com 改为你在 Github 上注册的邮箱,之后会要求确认路径和输入密码&#xff0c…

计算机网络(谢希仁版)基础期末复习

一、前言 该篇文章是对计算机网络(谢希仁版)常考的期末复习知识点进行的总结,可以供大家进行简单的复习,适用于网络工程、计算机网络类专业的同学进行复习使用。其他对计算机网络感兴趣的同学、相关专业人士也可进行阅读。 二、第…

arcpy调用系统自带工具箱、检测文件是否存在、获取要素文件的属性(名称类型)、列出数据函数的使用

前言 前言其实我也不知道说什么,以往说的都是;垃圾话,现在垃圾话也说不出了,但是这是必不可少的内容! 一、调用系统工具箱 我在这里以裁剪工具为例,其他的工具类似。 那么我们怎么知道我想使用的工具在…

【如何用大语言模型快速深度学习系列】从n-gram到TFIDF

感谢上一期能够进入csdn“每日推荐看”,那必然带着热情写下第二期《从n-gram到TFIDF》,这里引入一本《Speach and Language Processing》第三版翻译版本(语音与语言处理(SLP)),前半部分写的很好!里面连编辑…

软件测试的概念与过程---项目启动与需求评审

软件测试的概念与过程---项目启动与需求评审 1、项目启动参加的人员成员组成 2、需求评审 1、项目启动参加的人员 成员组成 项目经理: 为项目的成功策划和执行负总责的人产品经理: 根据市场的需求制定需求分析研发组长: 1.负责本小组的安全工作和日常研发工作 2.对组内人员…