vue中获取checkbox-group选中的value和label值

43 阅读1分钟
<template>
  <el-checkbox-group v-model="checkedValues" @change="handleChange">
    <el-checkbox 
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-checkbox-group>
</template>

<script setup>
// 获取选中项的label和value
const options = [
   { label: '温度传感器', value: 1 },
   { label: '压力表', value: 2 }
]
const handleChange = (values) => {
  const selectedItems = options.value.filter(option => 
    values.includes(option.value)
  );
  
  // 输出结果示例:
  
  console.log('选中项详细信息:', selectedItems);
  
  // 单独获取labels和values
  const labels = selectedItems.map(item => item.label);
  const values = selectedItems.map(item => item.value);
}
</script>