Vue 3获取selection多选框的具体每一行的值

在 Vue 3 中，可以通过 `v-model` 绑定选中的值，然后在选中值发生改变时触发相应的方法获取具体每一行的值。

HTML 代码如下：

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input type="checkbox" v-model="selectedOptions" :value="option.value" @change="getSelectedRows">
      {{ option.label }}
    </label>
  </div>
</template>

在 `data` 中定义 `options` 数组和 `selectedOptions` 数组，分别用于存储所有选项和选中的选项：

data() {
  return {
    options: [
      { label: 'Option 1', value: 'option1' },
      { label: 'Option 2', value: 'option2' },
      { label: 'Option 3', value: 'option3' },
      { label: 'Option 4', value: 'option4' },
      { label: 'Option 5', value: 'option5' }
    ],
    selectedOptions: []
  }
},

然后定义 `getSelectedRows` 方法，在该方法中遍历 `selectedOptions` 数组，根据选中的值获取具体每一行的值：

methods: {
  getSelectedRows() {
    const selectedRows = []
    for (let value of this.selectedOptions) {
      const row = this.options.find(option => option.value === value)
      if (row) {
        selectedRows.push(row)
      }
    }
    console.log(selectedRows)
  }
}

以上代码将选中的行存储在 `selectedRows` 数组中，并打印输出。