勾选el-checkbox获取父元素的值
时间: 2023-04-02 14:03:42 浏览: 86
可以通过监听el-checkbox的change事件,在事件处理函数中获取父元素的值。具体实现可以参考以下代码:
HTML代码:
```
<el-checkbox-group v-model="checkedCities">
<el-checkbox label="北京"></el-checkbox>
<el-checkbox label="上海"></el-checkbox>
<el-checkbox label="广州"></el-checkbox>
<<el-checkbox label="深圳"></el-checkbox>
</el-checkbox-group>
```
JS代码:
```
data() {
return {
checkedCities: []
}
},
methods: {
handleCheckboxChange(val) {
console.log(val); // 输出勾选的城市数组
}
},
mounted() {
this.$nextTick(() => {
const checkboxGroup = this.$el.querySelector('.el-checkbox-group');
checkboxGroup.addEventListener('change', (event) => {
this.handleCheckboxChange(this.checkedCities);
});
});
}
```
相关问题
vue勾选el-checkbox获取父元素的值
可以通过监听 el-checkbox 的 change 事件,在事件处理函数中获取父元素的值。具体实现可以参考以下代码:
<template>
<div>
<el-checkbox v-model="checked" @change="handleChange">{{ parentValue }}</el-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
checked: false,
parentValue: '父元素的值'
}
},
methods: {
handleChange() {
if (this.checked) {
console.log(this.parentValue)
}
}
}
}
</script>
el-checkbox-group获取值
el-checkbox-group是Element UI中的一个组件,用于实现多选框的分组选择。要获取el-checkbox-group的值,可以通过v-model指令来绑定一个数据变量,当用户选择或取消选择多选框时,该变量的值会相应地改变。
以下是获取el-checkbox-group值的步骤:
1. 在Vue组件中引入el-checkbox-group组件,并在data中定义一个变量来存储选择的值,例如selectedValues。
2. 在el-checkbox-group上使用v-model指令将selectedValues与组件进行双向绑定,例如:v-model="selectedValues"。
3. 当用户选择或取消选择多选框时,selectedValues的值会自动更新。
4. 可以通过访问selectedValues来获取el-checkbox-group的值。
示例代码如下:
```
<template>
<div>
<el-checkbox-group v-model="selectedValues">
<el-checkbox label="选项1"></el-checkbox>
<el-checkbox label="选项2"></el-checkbox>
<el-checkbox label="选项3"></el-checkbox>
</el-checkbox-group>
<p>已选择的值:{{ selectedValues }}</p>
</div>
</template>
<script>
export default {
data() {
return {
selectedValues: [] // 存储选择的值
};
}
};
</script>
```
在上述示例中,selectedValues数组将存储用户选择的值。可以通过访问selectedValues来获取el-checkbox-group的值。