精华内容
下载资源
问答
  • vue 全选多选

    2018-06-29 09:28:00
    //全选按钮 <li class="choice_fme">  <div @click="checkAll" v-bind:class='[!isCheckAll ? "not_pitch_on" : "pitch_on"]'></div> </li> //列表 <ul class="msge_list cle....

    html:

    //全选按钮

    <li class="choice_fme">
      <div @click="checkAll" v-bind:class='[!isCheckAll ? "not_pitch_on" : "pitch_on"]'></div>
    </li>
    //列表
    <ul class="msge_list clearfix" v-for="(item,index) in messageItems" :key="index">
    <li class="choice_fme">
      <div v-bind:class='[!isCheck ? "not_pitch_on" : "pitch_on"]' @click="chooseOrder($event)"></div>
    </li>
    </ul>
    //全选按钮
    <li class="choice_fme_fast">
      <div @click="checkAll" v-bind:class='[!isCheckAll ? "not_pitch_on" : "pitch_on"]'></div>
    </li>
     
    js:
    export default {
    data(){
    return{
      messageItems:"",//获取到的数组
      isCheck:false, //多选按钮
      isCheckAll:false,//全选按钮
      checkAllNum:0, //选中数量
    }
    },
    methods:{
    //多选
    chooseOrder:function(e){
    if (e.target.className.indexOf("pitch_on") == 0) {
      e.target.className = "not_pitch_on" //未选中按钮样式
      if( this.checkAllNum>0){
        this.checkAllNum -=1
      }
    }else{
      e.target.className = "pitch_on";//选中按钮样式
      this.checkAllNum +=1;
    }
    if(this.checkAllNum == this.messageItems.length){
      this.isCheckAll = true
      this.isCheck = true
    }else if(this.checkAllNum !== this.messageItems.length){
      this.isCheckAll = false;
    }
    },
    //全选
    checkAll:function(){
      if(this.isCheckAll==false){
        this.checkAllNum = this.messageItems.length;
        this.isCheckAll = true;
        this.isCheck = true
      }else if(this.isCheckAll==true){
        this.isCheck = false
        this.checkAllNum = 0
        this.isCheckAll = false;
      }
    },
    },
    }
    css:
    .not_pitch_on{
    background: url(../../../common/images/k-1.png) no-repeat;
    }

    .pitch_on{
    background: url(../../../common/images/k-2.png) no-repeat !important;
    }

    转载于:https://www.cnblogs.com/lan-cheng/p/9241844.html

    展开全文
  • vue2.0多层全选按钮的实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue2.0多层全选按钮的实现</title> <script src=...

    vue2.0多层全选按钮的实现

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>vue2.0多层全选按钮的实现</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <style type="text/css">
            body {
                font-size: 28px;
                color: red;
            }
    
            #app {
                font: "微软雅黑";
                font-size: 26px;
                color: lightgreen;
            }
    
            .er {
                margin-left: 20px;
            }
        </style>
    </head>
    
    <body>
        <p>vue的多层全选按钮的实现</p>
        <hr />
        <div id="app">
            <div id="" v-for="data in datas">
                <!--遍历父的-->
                <input type="checkbox" :id="data.listTitle" value="" :checked="isTitleChecked(data)"
                    @change="changeTitleChecked(data,$event)" />{{data.listTitle}}
    
                <div class="er" v-for="item in data.listItem">
                    <!--遍历子的-->
                    <input type="checkbox" :value="item" v-model="data.selected" />
                    {{item.name}}
                </div>
            </div>
            <!-- <div id="quanxuan">
                <input id="all-checked" type="checkbox" :checked="isAllChecked()" @change="changeAllChecked($event)" />
                <span>全选</span>
            </div> -->
        </div>
    
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    datas: [
                        {
                            //用于判断是否展示子列表
                            // isShowListItem : false,
                            //用于记录选中了哪些子项
                            id: 666,
                            selected: [],
                            //父标题
                            listTitle: "一级标题",
                            //子列表
                            listItem: [
                                {
                                    id: 1222,
                                    info: 0,
                                    name: "高一"
                                },
                                {
                                    id: 23,
                                    info: 1,
                                    name: "高二"
                                },
                                {
                                    id: 13,
                                    info: 0,
                                    name: "高三"
                                }
                            ]
                        },
                        {
                            // isShowListItem : false,
                            id: 8888,
                            selected: [],
                            listTitle: "二级标题",
                            listItem: [
                                {
                                    id: 42,
                                    info: 1,
                                    name: "大一"
                                },
                                {
                                    id: 51,
                                    info: 0,
                                    name: "大二"
                                }
                            ]
                        }
                    ]
                },
                methods: {
    
                    /**
                    * 当父标题状态变化时的处理方法
                    * @param data [当前项的data]
                    * @param event [当前项的event]
                    */
                    changeTitleChecked: function (data, event) {
                        if (event.target.checked === true) {
                            data.listItem.forEach(function (item) {
                                data.selected.indexOf(item) === -1 && data.selected.push(item);
                            })
                        } else {
                            data.selected = [];
                        }
                    },
                    /**
                    * 判断父标题选择状态
                    * @param data [当前项的data]
                    * @returns {boolean}
                    */
                    isTitleChecked: function (data) {
                        var _selected = data.selected;
                        var _listItem = data.listItem;
                        // 验证selected中是否含有全部的item的id 如果是 证明title要选中
                        return _listItem.every(function (item) {
                            return _selected.indexOf(item) != -1;
                        });
                    },
    
                    /**
                    * 全选框change事件的回调处理方法
                    * @param event 
                    */
                    // changeAllChecked: function (event) {
                    //     if (event.target.checked === true) {
                    //         this.datas.forEach(function (data) {
                    //             data.listItem.forEach(function (item) {
                    //                 data.selected.indexOf(item) === -1 && data.selected.push(item);
                    //             })
                    //         })
                    //     } else {
                    //         this.datas.forEach(function (data) {
                    //             data.selected = [];
                    //         })
                    //     }
                    // },
    
                    /**
                    * 判断全选框选择状态
                    * @returns {boolean}
                    */
                    // isAllChecked: function () {
                    //     return this.datas.every(function (data) {
                    //         return data.selected.length === data.listItem.length;
                    //     });
                    // }
    
                }
    
            })
        </script>
    </body>
    
    </html>
    
    展开全文
  • 项目场景:在vue中做个全选按钮 提示:这是在做项目中,有时会需要制作一个全选按钮来获取全部按钮,传给后端的时候只留有所有按钮的id,除了全选的id外 全选按钮项目场景:在vue中做个全选按钮前言一、思路1、获取...

    项目场景:在vue的Cascader中做个全选按钮思路

    提示:这是在做项目中,有时会需要制作一个全选按钮来获取全部按钮,传给后端的时候只留有所有按钮的id,除了全选的id外


    前言

    在做项目中用cascader制作全选按钮


    一、思路

    <el-cascader v-model="ids" :options="idData" @change="handleChange"> </el-cascader>
    

    1、获取所有的id(用递归的方法遍历拥有的子孩纸的id)存储在idData里,将全部按钮的Id push或者unshift进入到idData里面。

    this.idData.unshift(push)({
    id:'00',
    idten:null,
    level:1,
    name:'全选',
    parentId:null
    }) 看你的IdData里的id对象是怎么定义的
    

    2、另一个变量是ids,是选择后的值都存储在里面的

    3、方法changeId(用于判断全选后的方法)

    在这里插入图片描述
    后面存储这次的idsOld=ids(存储上次的数据)

    展开全文
  • 使用了计算属性computed的特点来实现动态全选按钮的功能, 代码如下 <template> <div class="box"> <div class="allselect" @click="allSelect()"> <img :src="isAllSelect ? selectUrl : ...

    使用了计算属性computed的特点来实现动态全选按钮的功能,
    代码如下

    <template>
      <div class="box">
        <div class="allselect" @click="allSelect()">
          <img :src="isAllSelect ? selectUrl : notSelectUrl" alt="" />
          <div>全选</div>
        </div>
        <div v-for="(item, index) in goodList" :key="index" class="list" @click="itemClick(item)">
          <img :src="item.select ? selectUrl : notSelectUrl" alt="" />
          <div>{{ item.name }}</div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          //选中图标
          selectUrl: require("../assets/select.png"),
          //未选中图标
          notSelectUrl: require("../assets/notSelect.png"),
          //商品列表
          goodList: [
            { name: "商品1", select: true },
            { name: "商品2", select: true },
            { name: "商品3", select: true },
            { name: "商品4", select: true },
            { name: "商品5", select: true },
            { name: "商品6", select: true },
          ],
        };
      },
      methods: {
        //全选与不全选
        allSelect() {
          //若标识为true,则让所有商品不全选
          if (this.isAllSelect) {
            this.goodList.forEach((item) => (item.select = false));
          } else {
            //若标识为false,则让所有商品全选
            this.goodList.forEach((item) => (item.select = true));
          }
        },
        //商品选择与不选择
        itemClick(item){
          item.select=!item.select
        }
      },
      computed: {
        //返回被选中的商品列表
        selectList() {
          return this.goodList.filter((item) => item.select);
        },
        //动态判断是否全选
        isAllSelect() {
          return this.goodList.length === this.selectList.length;
        },
      },
    };
    </script>
    <style scoped>
    .box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .list {
      display: flex;
      margin-bottom: 2px;
      cursor: pointer;
    }
    .list img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }
    .allselect {
      display: flex;
      margin-bottom: 10px;
      cursor: pointer;
    }
    .allselect img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }
    </style>
    

    实现效果如下

    在这里插入图片描述

    我们只需要判断已选中的商品列表长度全部商品的列表长度是否一致,就可以达到动态全选与不全选的效果了

    展开全文
  • Vue + Element 做一个复杂点的表格,遇到以下问题:表格自带的表头全选框勾选之后,自己实现的全选框没有被勾选图片描述@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page=...
  • Vue + Element 做一个复杂点的表格,只是 翻页的时候,下方的全选还是选中状态,翻页如何让它跟上方的显示一样?@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="current...
  • vue.js 全选与取消全选 < div id = "app" > < p > 全选: < / p > < input type = "checkbox" id = "checkbox" v - model = "checked" @change = "changeAllChecked()" > < label for = ...
  • 使用vue模拟购物车全选按钮,逻辑

    千次阅读 2019-01-09 11:57:20
    全选 (val,index) in objArray" :key="index"> (val)"> <td> {{ index}} 商品名称:{{val.name}} 价格:{{val.price}} 标题:{{val.title}} 删除 (val)">+ (val)">- <span>{{val...
  • Vue中为ElementUI的表格多选框做外部全选按钮 由于在某些情况下,会使用模板生成表格,所以在column模板中type = selection时,不像在el-select-group中可以有明确的code值可以判断、选取,所以平时要用ref = ...
  • 这里先把文档截个图: 图比较长,文档上并没有全选的实例,我们可以分析这个页面,这个页面默认三行上海被选中了,是因为在<...el-checkbox-button中,上海会被选中,那么我们要想做个全选按钮
  • App.vue <template> <div id="app"> <index></index> </div> </template> <script> // 引入主页index import Index from './pages/Index'; export default { name: ...
  • 实现思路:1、 v-model 一个收集所有input(除全选框外)数组checkModel ,vue会动态将其checked为true的input的value值存入数组checkModel里2 、watch函数来监听checkModel 属性,当其长度==input元素时 全选按钮选中...
  • vue 多层选择按钮全选

    千次阅读 2017-06-21 22:43:38
    vue 多层选择按钮全选

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 144
精华内容 57
关键字:

vue全选按钮

vue 订阅