element 表格

最新推荐文章于 2024-07-03 11:19:28 发布

是阿狸

最新推荐文章于 2024-07-03 11:19:28 发布

阅读量233

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_64707449/article/details/131511773

版权

文章描述了一个前端界面的需求，包括左侧分类表格的添加、编辑和删除功能，以及右侧标签的添加和展示。当删除分类时，需处理与标签的关联关系，同时更新显示。特别地，删除分类后要确保正确的分类接续显示。代码示例展示了删除分类时逻辑判断的过程。

摘要由CSDN通过智能技术生成

实现效果：

需求：

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;
                    }
                }
             })                           
            })