Vue3+ElementUI 多选框中复选框和名字点击方法效果分离

在Vue3和ElementUI中，可以通过定义方法来处理多选框中复选框和名称的点击事件。以下是一个简单的示例，展示如何实现这一功能：

<template>
  <el-checkbox-group v-model="checkedNames" @change="handleCheckboxChange">
    <el-checkbox v-for="name in names" :label="name" :key="name" @click.native="handleNameClick(name)">
      {{ name }}
    </el-checkbox>
  </el-checkbox-group>
</template>
 
<script setup>
import { ref } from 'vue';
 
const checkedNames = ref([]);
const names = ['Alice', 'Bob', 'Charlie'];
 
const handleCheckboxChange = (value) => {
  console.log('Checkbox changed:', value);
};
 
const handleNameClick = (name) => {
  console.log('Name clicked:', name);
};
</script>

在这个例子中，checkedNames 是一个响应式引用，它存储了当前选中的复选框的值。handleCheckboxChange 方法会在复选框组的值发生变化时被调用，而 handleNameClick 方法会在单击复选框名称时被调用。

请注意，@click.native 是用于监听原生点击事件的修饰符，它允许你直接在组件上绑定原生事件，在这个例子中是绑定到 el-checkbox 组件上。