精华内容
下载资源
问答
  • vue多选
    2022-06-17 13:19:30

    1.这里通过for循环列出数据,绑定需要写样式的className:原有className=‘shop-checked’;选中className=is-shop-checked

    <span v-for="(itemIn,index)in data" class="shop-checked-parcel" @click="onShopChecked(itemIn.skuId)">
       <image  :class="['shop-checked',{'is-shop-checked':groupCheckeds.includes(itemIn.skuId)}]"   src="/static/images/icon/checked.png" class="shop-checked" />
    </span>
    

    2.选中的Id存放处

     data() {
        return {
          groupCheckeds: [],//选中存放处
        };
      },
    

    3.写在methods中的方法

    onShopChecked(skuId) {
          let self = this;
          let arr = self.groupCheckeds;
          let checkedData = []
          if(arr.includes(skuId)){
            let index = arr.indexOf(skuId);
            if(index > -1){
              arr.splice(index,1)
            }
          }else if(self.groupCheckeds.length = 1){//=1就是单选,不做这个判断就是多选,上限是20个选中就=20
              self.groupCheckeds.push(skuId)
          }else if(self.groupCheckeds.length > 1){//这是预防超出上限的操作
          	//这里写自己的message提示信息
            uni.showToast({
              title: '超出批量操作限制',
              duration: 1000,
              position: "bottom",
              icon: "none",
            });
            return
          }
          //这里是把数据存在这个方法中
          self.groupCheckeds.map((item)=>{
            checkedData.push(item)
          })
          //把选中的数据发送到父组件
          self.$emit('childrenData',checkedData)
        }
    
    更多相关内容
  • 动态生成多选列表的组件封装,数据格式[{'value': '1', 'name': '选项1'},{'value': '2', 'name': '选项2(禁用)', 'disabled': true}, {'value': '3', 'name': '选项3'}]
  • vue多选

    2021-11-23 16:03:01
    做项目的时候,产品需求需要多选,记录一下代码,以后可以直接使用,也想没有思路的伙伴提供一个代码: data中的数据结构,我们必须要一个字段来记录当前的选中状态,我在这里使用了isActive来记录当前点击元素选中...

    做项目的时候,产品需求需要多选,记录一下代码,以后可以直接使用,也想没有思路的伙伴提供一个代码:

    1. data中的数据结构,我们必须要一个字段来记录当前的选中状态,我在这里使用了isActive来记录当前点击元素选中的状态
    data() {
      return {
    	diseasesList: [
    	        {
    	          isActive: false,
    	          type: "blood_pressure",
    	          name: "血压问题",
    	        },
    	        {
    	          isActive: false,
    	          type: "blood_sugar",
    	          name: "血糖问题",
    	        },
    	        {
    	          isActive: false,
    	          type: "heart",
    	          name: "心脏问题",
    	        },
    	        {
    	          isActive: false,
    	          type: "sleep",
    	          name: "睡眠问题",
    	        },
    	        {
    	          isActive: false,
    	          type: "breath",
    	          name: "呼吸问题",
    	        },
    	        {
    	          isActive: false,
    	          type: "joint",
    	          name: "关节问题",
    	        },
    	      ],
    	  }
    	}
    	  
    
    1. 在template循环上面的diseasesList并且添加handletDiseasesClick点击事件,并切把当前点击的项传参
    	 <div class="sickness-flex">
    	    <div
    	      :class="{ active: item.isActive }"
    	      v-for="(item, index) in diseasesList"
    	      :key="index"
    	      @click="handletDiseasesClick(item, index)"
    	    >
    	      {{ item.name }}
    	    </div>
    	  </div>
    
    1. 因为vue是响应式的,所以当你修改了当前项的isActive,data中的数据也会改变
      methods: {
        handletDiseasesClick(item, index) {
          item.isActive = !item.isActive;
        },
      },
    

    4)样式 :class="{ active: item.isActive } 通过点击控制isActive 来展示active的样式

    	.sickness-flex {
    	  display: flex;
    	  justify-content: space-between;
    	  flex-wrap: wrap;
    	}
    	.sickness-flex .active {
    	  background: #8b67a9;
    	  color: #ffffff;
    	}
    	.sickness-flex div {
    	  padding: 18px 35px;
    	  box-sizing: border-box;
    	  background: #f4f4f4;
    	  border-radius: 60px;
    	  margin: 30px 20px;
    	  cursor: pointer;
    	}
    

    点击查看效果

    展开全文
  • vue 多选功能

    2021-12-02 14:58:08
    vue 多选功能 预计实现的效果: 1,多选 2,选中后,再次点击能取消选择 接口返回的数据: imgList = [ 'https://huixinbao.oss-cn-qingdao.aliyuncs.com/1/1637835261273.jpg', '...
    vue 多选功能

    预计实现的效果:
    1,多选
    2,选中后,再次点击能取消选择
    在这里插入图片描述
    接口返回的数据:

    imgList = [ 
    'https://huixinbao.oss-cn-qingdao.aliyuncs.com/1/1637835261273.jpg',
    'https://huixinbao.oss-cn-qingdao.aliyuncs.com/1/1637835264326.jpg', 
    'https://huixinbao.oss-cn-qingdao.aliyuncs.com/1/1637835367647.jpg'
      ]
    

    实现代码:
    html:

    <div class="annex_imagesLine">
       <div class="annex_imagesOne" v-for="(item,index) in annex_images">
              <div class="flex-box"> <img :src="item" alt="">  </div>
              <div  class="goChoosePic" :class="{'alreadyChoose':arr.includes(item)}"  @click="goChooseAnneximagesClick(item)"></div>
       </div>
    </div>
    

    说明::class="{‘alreadyChoose’:arr.includes(item)}" 意思是:
    选中的数组 arr 包含此元素,class的样式为 alreadyChoose

    css略

    js:以下为vue3的语法

     const arr:Ref<Array> = ref([]);
     const goChooseAnneximagesClick: Function = (item): void => {
          if(arr.value.includes(item)){
            //includes()方法判断是否包含某一元素,返回true或false表示是否包含元素,对NaN一样有效
            //filter()方法用于把Array的某些元素过滤掉,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素:生成新的数组
            arr.value = arr.value.filter(function (ele){return ele != item;});
          }else{
            arr.value.push(item);
          }
          console.log(arr.value,"是arr.value")
        }
    
    展开全文
  • vue多选下拉框

    千次阅读 2021-12-28 14:26:27
    点击页面其他地方就会...多选.vue <template> <div class="cx"> <div class="box"> <div class="content"> <span v-show="cList.length>0" v-for="(item,index) in cList" :key=..

    点击页面其他地方就会关闭,也可以手段点箭头关闭,会随着内容增加增加高度,宽度写死了,也可以写活,选中了选项可以删除,可以根据捕获选择事件来获取选中值

    多选.vue

    <template>
    <div class="cx">
    <div class="box">
      <div class="content">
        <span v-show="cList.length>0" v-for="(item,index) in cList" :key="index" class="item">
          {{item.label}}
          <span @click="delItem(index)">x</span>
        </span>
        <span v-show="cList.length<1" class="info">请选择</span>
      </div>
      <div class="btn" @click="visible=!visible">V</div>
    </div>
      <div class="z">
        <ul v-show="visible" class="list">
          <li v-for="(item,index) in list" :key="index" :class="['item',kList[index]?'active':'']"  @click="addItem(item,index)">
            {{item.label}}
          </li>
        </ul>
      </div>
    
    
    </div>
    </template>
    
    <script>
    export default {
      name: "MutiSelect",
      props:['list'],
      data(){
        return{
          visible: false,
          cList:[],
          kList:[]
         }
      },
      watch:{
        list:{
          handler( o){
             console.log(o);
              this.cList=[];//全部清空
            this.kList.length=this.list.length;
          },
          deep:true// 深度监听父组件传过来对象变化
        }
      },
      mounted() {
        this.kList.length=this.list.length;
        console.log(this.kList)
    
        document.addEventListener('click',this.outClick)
      },
      destroyed(){
        document.removeEventListener('click',this.outClick)
      },
      methods:{
        delItem(index){
          //cList index
          this.kList[this.cList[index].index]=false;
          this.cList.splice(index,1);
        },
        handleDrop(){
          this.visible=!this.visible
        },
        outClick(e){
          let dropRef= this.$el
          if(!dropRef.contains(e.target)&&this.visible){
            this.visible=false
          }
        },
        addItem(o,index){
          for (let i=0;i<this.cList.length;i++){
            if(this.cList[i].key===o.key){
              this.cList.splice(i,1);
              this.kList[index]=false;
              return;
            }
          }
          this.cList.push({...o,index:index});
          console.log(this.cList)
          this.kList[index]=true;
          console.log(index)
        }
      },
    }
    </script>
    
    <style scoped>
    .cx{
      position: relative;
      display: inline-block;
      color: #125165;
      user-select: none;
    
    
    }
    .box{
      display: flex;
       width: 200px;
      vertical-align: middle;
      background-color: lightblue;
      left: 0;
     text-align: center;
      box-shadow: inset 0 0 0 2px #125165;
      padding: 10px 0;
    }
    .box>.content{
      flex: 1;
    }
    .box>.content>.info{
      color: #5d8a99;
    }
    .z{
      position: relative;
      display: block;
    }
    .box>.content>.item{
      display: inline-block;
      padding: 2px 10px;
      box-shadow: inset 0 0 0 1px #125165;
      border-radius: 3px;
      margin-left: 5px;
      margin-top: 2px;
    }
    .box>.btn{
      width: 20px;
      text-align: center;
     }
    .cx>.list{
      position: absolute;
      top:40px;
    }
     ul{
      list-style: none;
      margin: 0;
      position: absolute;
       top: 10px;
      padding-inline-start: 0;
      background-color: lightblue;
      left: 0;
      width: 100%;
    
      box-shadow: inset 0 0 0 2px #125165;
    
    }
    
     ul>li{
      padding: 10px 0;
       padding-inline-start: 20px;
    }
     ul>li:hover, ul>li.active{
      background-color: #125165;
      color: lightblue;
    }
    </style>

    使用方法

      <muti-select :list="fruits2"/>

    绑定数据:

          fruits2:[
            {
              label:'苹果',
              value:'apple',
              key:'12'
            },
            {
              label:'梨子',
              value:'pear',
              key:'13'
            },
            {
              label:'香蕉',
              value:'banana',
              key:'14'
            },
            {
              label:'橘子',
              value:'orange',
              key:'15'
            },
            {
              label:'柠檬',
              value:'lemon',
              key:'16'
            },
          ],

    目前功能不够齐全,以后更新

    展开全文
  • 记录 vue多选改单选

    2022-07-27 17:25:03
    vue多选改单选
  • VUE多选删除列表遇到的坑

    千次阅读 2022-04-28 09:10:34
    页面效果 数据结构 list: [{ name: '名称1', indexs: [{ tag: '标签1' },{ tag: '标签2' },{ tag: '标签3' },{ tag: '标签4' }] },{ name: '名称2',
  • vue 多选缩略图

    2022-02-16 09:23:28
    <hc-dialog title="选择图片" :visible.sync="selectImgFlag" width="520px" top="10vh" class="dialog-picker selectImageDialog" :close-on-click-modal="false" :append-to-body= "true" ...
  • VUE多选按钮变色

    2021-09-16 16:09:04
    selected: [],//选中的服务项目名称 <div class="filter-nav" v-for="(item,index) in navTabr" :key="index" :class="{'active':selected.indexOf(item)!=-1}" @click="active(index,item)">...
  • vue-select 多选下拉列表,建议用火狐或者谷歌浏览器打开,低版本IE对vue兼容性不好
  • vue多选组件

    2020-07-26 14:07:59
    组件结构: <template> <div class="wt-checkbox"> <...li v-for="(item, index) in dataSource" :key="index" @click='handle(item, index)'>...p :class="{'icon-check acitive': find(item), '...
  • vue多选 取消多选

    2021-08-23 14:31:01
    <!-- 选择分类 --> <div class="cell-item"> <div class="item-label">选择分类</div> <div class="item-value" @click="showLabel"> <div class="value">... .
  • vue上传demo,支持多选,拖拽上传
  • 主要为大家详细介绍了vue实现自定义多选按钮,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue多选 多选框

    千次阅读 2019-09-26 17:27:28
    vue多选 多选框
  • vue多选、全选和选中删除问题

    千次阅读 2019-11-28 21:31:56
    vue = new Vue ( { el : "#vueContainer" , data : { fruits : [ { fruitId : '1' , value : '苹果' } , { fruitId : '2' , value : '荔枝' } , { fruitId : '3' , value : '香蕉...
  • 最近接手了公司的vue项目,改功能是要实现可以选中多个标签,这里没有用mint-ui的组件,是通过增加class实现的,截图如下(不会排版有点丑):vue页面这里可以看出按钮位置就是增加了一张图片来显示的其中选中的图标是...
  • 主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • VUE多选按钮实现

    千次阅读 2019-05-27 02:42:10
    <div class="label" id="label"> <span @click="label.label1 = !label.label1" :class="label.label1 ? 'active' : '' ">不吃辣</span> ...span @click="label.label2 = !label.label2" :c...
  • vue下拉框多选

    千次阅读 2022-04-20 18:18:56
    v-model绑定的value2就是你下拉框要多选的参数,例:1,2 <el-select v-model="value2" allow-create filterable multiple collapse-tags default-first-option placeholder="请选择文章标签"> <el-...
  • vue 多选、全选和选中删除问题

    千次阅读 2018-09-06 16:47:39
    var vue = new Vue({ el: "#vueContainer", data: { fruits:[{ fruitId:'1', value:'苹果' },{ fruitId:'2', value:'荔枝' },{ fruitId:'3', value:'香蕉' },{ fruitId:'4', value:'火龙果' } ], ...
  • 主要介绍了vue单个组件实现无限层级多选菜单的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • vue多选改变选中样式并获取id值

    千次阅读 2019-03-27 11:20:44
    这里需要注意的是,千万不要直接更改data数据,而是使用vue.set,我就是这里卡了好久。 var vm=new Vue({ el: '#main', data: { list: [ {id:1, label: '苹果'}, {id:2, label: '香蕉'}, {id:3, label: '...
  • vue实现单选多选

    2022-07-11 10:08:14
    vue实现单选多选
  • VUE实现多选效果

    2021-06-15 20:53:46
    <template> <view class="content"> <view v-for="(item,index) in arr" :key="index" @click="ch(index)" :class="{'box' : arr1.includes(index) }"> 数组的第{{index+1}}个:{{item}} ...
  • 这篇文章主要介绍了Vue多选列表组件深入详解,这个是vue的基本组件,有需要的同学可以研究下多选列表 (Multi-Select) 是一种将所有选项列出,并允许用户利用 Ctrl/Shift 键进行多选的 UI 元素。这是一种常见的设计...
  • VUE多选

    2021-05-15 17:24:30
    Document vue react jquery 提交
  • vue多选实现思路

    2020-03-04 15:46:15
    vue多选实现思路 数量少的用二进制或运算:存0或1或2这种 不定长仅存储用json object存储:通过键值对的形式存储 固定不变用多列存储 不定长要查询和维护建关系表存储 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,113
精华内容 5,245
关键字:

vue多选