vue 的全选组件封装你知道多少

效果

封装的组件

<template>
  <el-form-item :label="label">
    <el-checkbox :indeterminate="isIndeterminateBool" v-model="checkAll"
                 @change="handleCheckAllChange">全选
    </el-checkbox>
    <el-checkbox-group v-model="checkList" @change="handleCheckedCitiesChange">
      <el-checkbox :label="key" v-for="(item,key) in this.channelList"
                   :key="key">{{ item }}
      </el-checkbox>
    </el-checkbox-group>
  </el-form-item>
</template>
<script>
import {channelList} from "@/utils/app-channel";
export default {
  name: "Index",
  data() {
    return {
      //渠道列表 全部渠道
      channelList: channelList,
      //  checkbox 的不确定状态,一般用于实现全选的效果
      isIndeterminateBool: true,
      //全选默认不勾选
      checkAll: false,
      data: this.checkList,
    }
  },
  computed: {
    checkList: {
      get: function () {
        return (this.item[this.formDBName] || '').split("|").filter(str => (!!str));
      },
      set: function (newValue) {
        this.item[this.formDBName] = newValue.join("|");
      }
    }
  },
  props: {
    //表单名称
    label: {
      type: String,
      required: true
    },
    //当前选中项
    item: {
      type: Object,
      required: true
    },
    formDBName: {
      type: String,
      required: true
    }
  },
  methods: {
    getArrayCheckList() {
      return (this.item[this.formDBName] || '').split("|").filter(str => (!!str));
    },
    //将数据返回给父组件
    setChooseData(data) {
      this.$emit("choose-data", this.formDBName, data)
    },
    //value 代表选中还是未选中 ture false两个取值
    handleCheckAllChange(value) {
      const chooseChannel = Object.keys(this.channelList)
      this.checkList = value ? chooseChannel : [];
      this.isIndeterminateBool = false;
      this.checkAll = value;
      const formData = this.checkList.join("|");
      this.setChooseData(formData)
    },
    //选中后计算全选
    handleCheckedCitiesChange(value) {
      const chooseChannel = Object.keys(this.channelList);
      let checkedCount = value.length;
      this.checkAll = checkedCount === chooseChannel.length;
      this.isIndeterminateBool = checkedCount > 0 && checkedCount < chooseChannel.length;
      const formData = value.join("|");
      this.setChooseData(formData)
    },
  },
  mounted() {
    // .split("|").filter(str => (!!str && typeof (str) == 'string'))
  }
}
</script>
<style scoped>
</style>

渠道列表 

//
export const channelList = {
    "anguo": "安果",
    "baidu": "百度",
    "huawei": "华为",
    "samsung": "三星",
    "oppo": "OPPO",
    "sanliuling": "360",
    "meizu": "魅族",
    "vivo": "VIVO",
    "wandoujia": "豌豆荚",
    "xiaomi": "小米",
    "yyb": "应用宝",
    "yyh": "应用汇",
};

父组件使用

    <el-card shadow="hover">
            <multiple-choice :item="item" label="渠道/广告开关"
                             form-d-b-name="channel" @choose-data="onCheckResult"></multiple-choice>
          </el-card>

item[channle] 是存入字符串的以|分割的数据

比如

baidu|anguo|yyb

这样

onCheckResult
   onCheckResult(dbName, res) {
      this.item[dbName] = res;
    }

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

(0)

相关推荐

  • vue实现图片预览组件封装与使用

    这是移动端使用vue框架与mint-ui实现的父用子之间的通信实现的图片预览的功能,在父组件中每一张图片都可以实现图片放大查看. 子组件 <!--html部分--> <template> <div id="imgEnlarge" ref="imgEnlarge" class="img-bg" @click="imgBgHide" v-show="isShow"> <

  • 从组件封装看Vue的作用域插槽的实现

    作用域插槽不是那么直观的一个概念.Vue文档使用了一段描述性的话来解释作用域插槽: 有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽 -- 但是在我们应用的某些部分,我们希望每个独立的待办项渲染出和 todo.text 不太一样的东西.这也是作用域插槽的用武之地. 但在我看来,至少是第一次读到的时候,这段话相当不好理解.插槽不是分发内容到子组件吗,为什么还要从子组件中获取数据?不是已经有了通过emit事件的方法从子组件向父组件传递数据吗,为什么需要它?作用域插槽到底是来干嘛的?-

  • vue3递归组件封装的全过程记录

    目录 前言 1.递归组件 2.右键菜单组件 总结 前言 今天在写项目时,遇到一个自定义右键菜单的需求.在菜单中还有子菜单,所以这个时候就要用到递归组件了.所以写下这篇文章来记录一下自己编写递归组件的过程. 1.递归组件    递归组件,顾名思义就是在组件本身内部调用自身.所以我们先构建一个组件,并在自身内部调用自身.常见的递归组件就是我们项目中经常会用到的树组件了.下面就是我自己实现的一个能够满足项目需求的递归组件的源码. <template> <ul class="list-

  • vue弹出框组件封装实例代码

    新学vue,参考别人封装弹出层组件.好用! 1.你需要先建一个弹出框的模板: //首先创建一个mack.vue <template> <div class="mack" v-if="isShow"> <div class="mackWeb" :style="text.mackStyle"> <div class="title font_b" v-if="t

  • Vuejs 页面的区域化与组件封装的实现

    组件的好处 当我用vue写页面的时候,大量的数据页面渲染,引入组件简化主页面的代码量,当代码区域块代码差不多相同时,组件封装会更加简化代码.组件是Vue.js最强大的功能之一. 组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 我用一个读书软件的图书列表例子: 图书展示页 大家可以想想用vue如何实现这个页面的前端页面实现,再来实现逻辑功能: 图片显示的 '推荐图

  • vue项目中进行svg组件封装及配置方法步骤

    最近刚入新的公司,拿到项目之后,发现一个有趣的事情就是标题的icon是用svg来弄的,这篇文章彻底弄清楚怎么使用 1.创建vue项目(通过cli来搭建脚手架,该测试项目是用vue cli4进行配置的) 2.创建一个自定义组件 具体代码如下: <template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href=

  • vue实现全选组件封装实例详解

    效果 封装的组件 <template> <el-form-item :label="label"> <el-checkbox :indeterminate="isIndeterminateBool" v-model="checkAll" @change="handleCheckAllChange">全选 </el-checkbox> <el-checkbox-group v

  • vue 的全选组件封装你知道多少

    效果 封装的组件 <template> <el-form-item :label="label"> <el-checkbox :indeterminate="isIndeterminateBool" v-model="checkAll" @change="handleCheckAllChange">全选 </el-checkbox> <el-checkbox-group v

  • vue实现全选和反选功能

    本文实例为大家分享了vue实现全选反选功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script type="text/javascript" src = "vue.j

  • vue checkbox 全选 数据的绑定及获取和计算方法

    html <input type='checkbox' v-model='checkboxModel' :value='z.coach_id+"-"+z.amount' :i="dianji" @click="lll"> 第一个CheckBox <span><input type='checkbox' v-model='checked' v-on:click='checkedAll'><span clas

  • vue 实现全选全不选的示例代码

    全选功能可以说是前端开发中非常常见的一个功能,以前的项目开发用jQuery开发比较多.最近在使用vue前端框架重构之前的项目.从jQuery到vue的转变主要是一个思想想的转变,是将原有的直接操作dom的思想转变到操作数据,用数据驱动dom,也是vue框架的一个核心思想,思想转变过来,对功能的实现自然容易理解一些. 例如下面这个简单的demo 按照jQuery的思想来做的话,要选中全选checkbox和所有的checkbox项,分别注册选中事件,判断选中状态来给相关的checkbox设置对应的状

  • vue 基于element-ui 分页组件封装的实例代码

    具体代码如下所示: <template> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, j

  • Vue自定义多选组件使用详解

    本文实例为大家分享了Vue自定义多选组件使用的具体代码,供大家参考,具体内容如下 子组件(选项卡) checkBoxCard.vue <template> <div class="checkBoxCard"> <div :class="`box ${check && 'boxCheck'}`" @click="checked(), updateData()"> {{ name }} </d

  • vue实现全选功能

    本文实例为大家分享了vue实现全选功能的具体代码,供大家参考,具体内容如下 全选思路 1.准备标签,样式,js,准备数据 2.将数据循环展示在页面上, 在li 里v-for 3.在全选框 v-model = "isAll" //总的状态 4.小选框 v-model = "" //单个的状态 5.小选影响全选 ... 定义计算属性 isAll 统计小选框的状态, every查找数组里不符合条件的,直接返回false ...判断每一个小选框的状态, 只要有一个小选框的状

  • vue+elementUI面包屑组件封装方法详解

    本文实例为大家分享了vue+elementUI面包屑组件封装的具体代码,供大家参考,具体内容如下 一.选择用哪种样式 二.在组件文件夹下创建组件 三.在Bread.vue复制如下代码 <template>   <!-- 面包屑 -->   <div class="bread">  <el-breadcrumb separator-class="el-icon-arrow-right">  <el-breadcru

随机推荐