vue中全選組件封裝的示例分析

這篇文章將為大家詳細講解有關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;
    }

關于“vue中全選組件封裝的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。