vue實現(xiàn)全選組件封裝實例詳解
更新時間：2022年02月07日 16:10:29 作者：安果移不動
這篇文章主要介紹了vue?全選組件封裝,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
效果
封裝的組件
<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 的不確定狀態(tài)，一般用于實現(xiàn)全選的效果
isIndeterminateBool: true,
//全選默認(rèn)不勾選
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
},
//當(dāng)前選中項
item: {
type: Object,
formDBName: {
methods: {
getArrayCheckList() {
return (this.item[this.formDBName] || '').split("|").filter(str => (!!str));
//將數(shù)據(jù)返回給父組件
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("|");
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": "應(yīng)用寶",
"yyh": "應(yīng)用匯",
};父組件使用
<el-card shadow="hover">
<multiple-choice :item="item" label="渠道/廣告開關(guān)"
form-d-b-name="channel" @choose-data="onCheckResult"></multiple-choice>
</el-card>item[channle] 是存入字符串的以|分割的數(shù)據(jù)
比如
baidu|anguo|yyb
這樣
onCheckResult
onCheckResult(dbName, res) {
this.item[dbName] = res;
}到此這篇關(guān)于vue 全選組件封裝的文章就介紹到這了,更多相關(guān)vue 全選組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue全局組件與局部組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-03-03
這篇文章主要介紹了Vue中computed和watch有哪些區(qū)別，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
本文主要介紹了在vue中寫jsx的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了vue中使用echarts的方法,結(jié)合實例形式詳細(xì)分析了vue中使用echarts的包安裝、引入、生命周期函數(shù)元素掛載等相關(guān)操作技巧與使用注意事項,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了如何使用 Deepseek 寫的uniapp油耗計算器,下面是一個基于 Uniapp 的油耗計算器實現(xiàn),包含 Vue 組件和頁面代碼,需要的朋友可以參考下2025-04-04
window.onresize在vue中只能使用一次,自適應(yīng)resize報錯問題
這篇文章主要介紹了window.onresize在vue中只能使用一次,自適應(yīng)resize報錯問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vuecli3.x中輕松4步帶你使用tinymce的步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要為大家詳細(xì)介紹了vue.js表格分頁示例，ajax異步加載數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實現(xiàn)點擊按鈕小球加入購物車動畫,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
這篇文章主要介紹了keep-alive組件的作用與原理,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05