vue实现列表选入以及删除功能

最新推荐文章于 2024-08-19 23:04:51 发布

周金鱼啊

最新推荐文章于 2024-08-19 23:04:51 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_40881970/article/details/88851706

本文介绍了一个简单的指标选择组件实现方案，该组件允许用户从左侧列表中选择指标并将其移动到右侧的已选指标列表中。同时支持取消选择的功能，即从已选列表中移除指标并取消左侧相应选项的高亮显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如上图左边点击完之后将点击的内容加入右边的已选指标中，然后左边高亮显示，右边点击删除内容，左边同内容取消高亮

实现思路：

1.创建一个空数据，用来存放已经选择的指标；

2. 在点击指标的时候要获取到当前点击的指标名字，并且将控制高亮的值改为true,然后push到创建的空数组中，这里需要做一下判断，如果点击的这个指标已经存在数组中那就不push，可以弹框提示！

3.然后展示就是通过v-for遍历数据，

4.点击已选的指标要删除当前点击的指标，并且让左侧的同内容取消高亮，

5.同样给右侧绑定点击事件，点击的时候获取到当前点击的指标名称，然后遍历左侧的数据，如果指标名称一样，可以将控制高亮的值改为false,这样左侧就会取消高亮状态！

代码

<template></template>中

<div class="fl cont_box left_cont_box">
     <div class="list_title"><i></i>特征指标</div>
          <ul>
              <li v-for="(item,index) in traitIndex" :key="index"  :class="item.isSelected 
? '': 'listCLickBor'"
                @click="traitIndexSwitch(item,index)">
                      {{item.name}}
               </li>
           </ul>
  </div>
  <div class="fr cont_box right_cont_box">
       <div class="list_title"><i></i>已选指标</div>
             <ul>
                <li v-for="(item,index) in haveBiomeArr" :key="index"
                @click="divListIndex3=index,traitIndexSwitch2(item,index)">
                     <i></i>
                      {{item}}
                 </li>
                </ul>
         </div>
 </div>

<script></script>

 export default {
        name:"App",
        data(){
            return {
                haveBiomeArr:[], //存已经选择的指标
                 traitIndex: [
                    {name:"温度",isSelected:true},
                    {name:"湿度",isSelected:true},
                    {name:"风力",isSelected:true},
                    {name:"降雨量",isSelected:true},
                    {name:"平均温度",isSelected:true},
                    {name:"平均湿度",isSelected:true},
                ],
            }
        },
        methods:{
            //特征指标---选入
            traitIndexSwitch(item,index){ 
                item.isSelected = false;
                if(this.haveBiomeArr.length == 0){
                    this.haveBiomeArr.push(item.name);
                }
                else{
                     var target;
                     for(let i = 0;i<this.haveBiomeArr.length; i++){
                         if(item.name == this.haveBiomeArr[i] ){
                            target = true; //如果内容一样，说明数组中存在
                            break;
                         } 
                     }
                     if(!target){
                        this.haveBiomeArr.push(item.name);
                     }   
                }
            },
            //特征指标--选出
            traitIndexSwitch2(item,index){
                //删除元素
                 for(let i = 0;i<this.haveBiomeArr.length; i++){
                     if(item == this.haveBiomeArr[i]){
                         this.haveBiomeArr.splice(i,1);
                     }
                 }
                 //显示元素
                 for(let i = 0 ; i < this.traitIndex.length;i++){ //遍历数据
                     if(this.traitIndex[i].name == item){
                         this.traitIndex[i].isSelected = true;
                     }
                     console.log(this.traitIndex[i])
                 }
            }
        }
    }

css中高亮的代码

.left_cont_box li.listCLickBor{
    border:1px solid #0A7EDF;
    color:#0A7EDF !important;
}