vue3 中selectable row和index 属性

在 Vue 3 中，要实现可选择的行和索引属性，你可以使用 `<template>` 元素和 `v-for` 指令来创建一个列表，然后使用 `v-model` 指令来绑定选择的行。

首先，你需要定义一个数据属性来存储选中的行和索引。例如：

data() {
  return {
    selectedRows: [],
    selectedIndexes: []
  };
},

接下来，在模板中使用 `v-for` 指令来遍历行，并添加一个复选框来选择行。使用 `v-model` 指令将复选框的选中状态与 `selectedRows` 数组绑定。同时，使用 `v-bind` 绑定 `index` 属性到行的索引上。

<template>
  <div>
    <table>
      <tr v-for="(row, index) in rows" :key="index">
        <td>
          <input type="checkbox" v-model="selectedRows" :value="row" />
        </td>
        <td>{{ row }}</td>
      </tr>
    </table>
  </div>
</template>

最后，你可以在方法中访问 `selectedRows` 数组，其中包含用户选择的行。如果你还需要访问选择行的索引，可以使用 `selectedIndexes` 数组。

methods: {
  getSelectedRowsAndIndexes() {
    console.log(this.selectedRows); // 选中的行
    console.log(this.selectedIndexes); // 选中行的索引
  }
},

希望这可以帮助到你！