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;
    }

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注www.887551.com的更多内容!