<template>
<div class="select-box">
<div @click="showOrHide">{{ chkNum }}{{ defaultUserNum }}</div>
<transition name="checkboxselect">
<div class="select-list" v-show="isCheckBoxShow">
<label :for="item.value" v-for="(item, index) in usersTypes" :key="item.value">
<input type="checkbox" :id="item.value" @click="count(item.value, item.name, index)" ref="chkb" :name="item.name" />{{ item.name }}
</label>
</div>
</transition>
</div>
</template>
<script>
export default {
name: "CheckBoxSelect",
props: {
// 选项
usersTypes: {
type: Array,
},
// 框中单位/内容
defaultUserNum: {
type: String,
},
},
data() {
return {
isCheckBoxShow: false, // 下拉选项是否显示
chkNum: 0, // 选中复选框数量
selectedChkList: [], // 存放被选中的选项
};
},
methods: {
// 计算选中的checkbox数量和选中的项的value和name
count(value, name, index) {
var nums = 0;
var chk = this.$refs.chkb;
// console.log(chk);
for (var i = 0; i < chk.length; i++) {
if (chk[i].checked) {
nums++;
}
}
this.chkNum = nums;
},
// 显示或隐藏选项框
showOrHide() {
this.isCheckBoxShow = !this.isCheckBoxShow;
},
},
代码和效果如上,这是子组件,想选中某一项就把它的name值存到数组selectedChkList中,取消选中则把这个name从数组中移除,然后把这个数组传递给父组件,这个怎么实现?求教,谢谢!