vue 的全选组件封装你知道多少
程序员文章站
2022-01-06 07:48:25
效果封装的组件
效果
封装的组件
<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组件开发之异步组件详解