精华内容
下载资源
问答
  • Vue 实现多选

    2019-10-21 09:41:34
    vue 多选 按钮 先看一下效果吧 内容比较机密 所以打了一下马 ‘不好意思’ HTML代码 js CSS

    vue 多选 按钮

    先看一下效果吧 内容比较机密 所以打了一下马 ‘不好意思’

    在这里插入图片描述

    HTML代码

    在这里插入图片描述

    js

    在这里插入图片描述

    CSS

    在这里插入图片描述

    展开全文
  • vue 实现多选

    2019-03-26 23:23:00
    v-model <template> <!--用户页面-选择关注--> <div class="follow"> <h4>选择关注</h4> <p>请选择您感兴趣的分类,给您最精准的推荐</p>... ...

    v-model

    <template>
        <!--用户页面-选择关注-->
        <div class="follow">
            <h4>选择关注</h4>
            <p>请选择您感兴趣的分类,给您最精准的推荐</p>
            <div>
                <ul class="flexStart">
                    <li v-for="(item,index) in followLists" :key="index">
                        <input type="checkbox" :id="item.id" :value="item.id" v-model="selectedIndex"/>
                        <label :for="item.id" class="choice-item">{{item.txt}}</label> 
                    </li>
                </ul>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            name: 'userFollow',
            data() {
                return {
                    selectedIndex: [],
                    followLists: [
                        {id: 0, txt: '入职体检'},
                        {id: 1, txt: '入职体检'},
                        {id: 2, txt: '入职体检'},
                        {id: 3, txt: '入职体检'},
                        {id: 4, txt: '入职体检'}
                    ]
                }
            }
        }
    </script>
    
    <style scoped>
        h4 {
            font-size: 18px;
        }
        .follow {
            padding: 30px 0 0 10px;
            float: left;
            width: 400px;
            color: #0c0c0c;
        }
        .follow h4 {
            color: #358ee7;
        }
        .follow p {
            margin-bottom: 12px;
        }
    // 隐藏input .follow ul li input { display: none; }
    // 设置lable样式 .choice-item { float: left; width: 120px; height: 36px; line-height: 36px; text-align: center; border-left: 6px solid #d6d6d6; background-color: #eaeaea; margin-bottom: 16px; margin-right: 10px; cursor: pointer; }
    // 设置选中项label样式
    input:checked + .choice-item { color: #fff; border-left: 6px solid #0a69c7; background-color: #358ee7; } </style>

     

    转载于:https://www.cnblogs.com/duanzhenzhen/p/10604657.html

    展开全文
  • }, 显示传值 methods: { // 下拉多选传值展示 change(msg) { this.selectName = msg; }, } 组件样式 .selectInput .title { width: 300px; position: relative; } .selectInput input[type="text"] { width: 300px;...

    效果展示

    image.png下拉组件

    //下拉列表

    • {{item.Name}}

    data() {

    return {

    checkedData: [], //选中的数据

    isShow: false, //下拉列表是否显示

    selectCon: "", //选中的内容

    };

    },

    props: ["liData"],

    点击空白处隐藏下拉列表

    mounted() {

    let that = this;

    //点击页面空白处隐藏下拉列表

    document.addEventListener("click", function() {

    that.isShow = false;

    });

    },

    控制下拉列表的显示隐藏

    methods: {

    //控制下拉列表的显示隐藏

    liShow() {

    this.isShow = true;

    },

    子组件的数据的监听和操作

    watch: {

    liData: {

    handler(newVal, oldVal) {

    //选中数据

    this.checkedData = newVal.filter(function(item) {

    return item.Check == true;

    });

    //在页面打印出的数据

    this.selectCon = ""; //点击的当前项的展示

    for (var i = 0; i < this.checkedData.length; i++) {

    this.selectCon += this.checkedData[i].Name + " ";

    }

    // 给父组件传值

    this.$emit("change", this.selectCon);

    },

    deep: true

    }

    }

    子组件调用

    当前选中:{{selectName}}

    展示数据

    data() {

    return {

    liData: [

    {

    Id: 1,

    Name: "孙小胖1",

    Check: false

    },

    {

    Id: 2,

    Name: "孙小胖2",

    Check: false

    }

    ],

    selectName: ""

    };

    },

    显示传值

    methods: {

    // 下拉多选传值展示

    change(msg) {

    this.selectName = msg;

    },

    }

    组件样式

    .selectInput .title {

    width: 300px;

    position: relative;

    }

    .selectInput input[type="text"] {

    width: 300px;

    height: 40px;

    padding: 0 5px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    border-radius: 3px;

    -moz-border-radius: 3px; /* Firefox */

    -webkit-border-radius: 3px; /* Safari 和 Chrome */

    border-radius: 3px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

    }

    .selectInput i {

    position: absolute;

    width: 30px;

    height: 40px;

    line-height: 38px;

    right: -12px;

    top: 1px;

    text-align: center;

    cursor: pointer;

    }

    .selectInput ul {

    border-radius: 3px;

    -moz-border-radius: 3px; /* Firefox */

    -webkit-border-radius: 3px; /* Safari 和 Chrome */

    border-radius: 3px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);

    -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); /* Firefox */

    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); /* Safari 和 Chrome */

    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

    width: 253px;

    /* border: 1px solid #ccc; */

    padding: 10px 30px;

    }

    .selectInput li {

    line-height: 30px;

    }

    展开全文
  • vue实现多选改变样式

    2021-03-10 10:03:45
    vue实现多选改变样式(自己写个小笔记) 欢迎使用Markdown编辑器 直接上代码 // 主要是绑定:class <el-tag :key="tag" v-for="(tag, index) in selectTags" @click="multipleSelect(tag, index)" :class="{ ...

    vue实现多选改变样式(自己写个小笔记)

    欢迎使用Markdown编辑器

    直接上代码

    // 主要是绑定:class
                <el-tag
                  :key="tag"
                  v-for="(tag, index) in selectTags"
                  @click="multipleSelect(tag, index)"
                  :class="{ multipleSelected: multipleList.indexOf(tag) != -1 }"
                >
                  {{ tag }}
                </el-tag>
    //data
    		  data() {
    		    return {
    		      selectTags: ['标签一', '标签二', '标签三'],
    		      multipleList: [],
    		    }
    		  },
    //methods
    		  methods:{
    			  multipleSelect(tag, index) {
    		      // indexOf()方法 没有检索到时返回-1
    		      console.log(this.multipleList.indexOf(tag))
    		      if (this.multipleList.indexOf(tag) !== -1) {
    		        this.multipleList.splice(this.multipleList.indexOf(tag), 1) //取消
    		      } else {
    		        this.multipleList.push(tag) //选中添加到数组里
    		      }
    		      // console.log(this.multipleList)
    		      },
    		  }
    

    效果
    在这里插入图片描述

    展开全文
  • 一、要实现的效果 1.当点击“全选”时,能全选所有; 2.点取消掉列表的某个input框时,“全选”框不被选择; 二、html结构 前提: v-for循环遍历list,列表中的每个item都有checked属性,用v-model绑定item....
  • vue 实现多选 方法

    千次阅读 2019-06-18 13:14:43
    vm = new Vue({ el : '#app', data : { activeIndex : 0, listData : [{ text : 'aaa', bOn:false }, { text : 'bbbb', bOn:false }, { text : 'cccc', bOn:...
  • vue 实现多选和单选

    2020-08-21 11:55:22
    上个小小的效果图,然后具体实现看代码 template <view v-for="(item, index) in list" @click="choose(index)"> <view class="choose" :class="{green:arr.includes(index)}"></view> <...
  • vue实现多选、全选功能

    千次阅读 2019-08-19 16:10:47
    // 多选 async choosed(index) { var idx = this.checkBox.indexOf(index); if(this.$refs.liId[index].className == 'item-r') { // 添加类--选中状态 this.$refs.liId[index].className = 'item-r choose'; ...
  • 直接上代码 这个是我自己写的示例 比较简单 很容易看懂 <template> <div id="multipleMain" class="fd-main"> <div :class="[{'fd-select-body-buttom': !flag}, {'fd-select-body': flag}]" @...
  • 样式切换在实际项目应用中,也是非常常用的,这里就说一下在vue框架中多选和单选的实现。 css选中样式 .active{ color:red } 多选 <li class="select" v-for="(item,index) in leftnav" :class="{active:item....
  • 首先设置一个多选 <el-table v-loading="loading" :data="reportList" @selection-change="handleSelectionChange"> // 多选框选中数据 handleSelectionChange(selection) { this.ids = selection.map(item...
  • vue实现多选全选功能(代码简洁)

    千次阅读 2020-05-07 14:16:24
    我们在项目中,很多时候用到自定义的多选,全选的功能,样式也是根据ui图变化的,因此需要手写一个全选...实现多选: 下面是ui上面提供的三种状态样式,未选中,全部是20rpx的小圆圈,选中一个后,选中的那个增加...
  • vue实现多选、单选、全选和反选

    千次阅读 2018-11-29 15:28:30
    此时,若index = n,则可以实现其他功能。    多选、全选、反选 想法:这次需要在data里定义一个工具数组arr,点击事件radio,把这个index传进arr。然后之后判断arr中是否存在这个index,如果存在,则说明他...
  • vue文件中 template <ul class="apontul1 paonul"> <li v-for="(item,index) in type_array" @tap="checkboxChange(index,item.categoryName)" :checked="item.selected" :class="{'apon':item.se...
  • element实现vue级联多选

    千次阅读 2019-05-06 15:43:00
    element实现vue级联多选 已经有大神完成element的改造github:https://github.com/webCoderJ/ele-multi-cascader#Attributes 已实践可用 posted @ 2019-05-06 15:43 ...
  • 1,在项目中是用循环生成多选组,并实现单选。在实际渲染中 会将多个多选列看成一个多选, <div v-for=" item in attributeList" :key="'sku'+item.name" class="sku-body"> <div class="sku-items-...
  • 主要为大家详细介绍了vue实现自定义多选按钮,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 565
精华内容 226
关键字:

vue实现多选

vue 订阅