vue 原生整行列表单选功能

在Vue中实现原生整行列表单选功能，可以通过以下步骤实现：

首先，在data中定义一个selectedRow变量，用于存储当前选中的行的数据。

然后，在列表的每一行中添加一个单选按钮或复选框，绑定该按钮或复选框的选中状态到该行的选中状态（可以使用v-model指令实现双向数据绑定）。

接下来，在点击列表某一行的时候，通过给该行绑定一个点击事件，将该行的数据赋值给selectedRow变量，表示该行被选中。

最后，可以通过判断selectedRow是否为空，来确定是否有行被选中。

示例代码如下：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in rows" :key="item.id" @click="selectRow(item)">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>
            <input type="radio" :value="item" v-model="selectedRow">
          </td>
        </tr>
      </tbody>
    </table>
    
    <div v-if="selectedRow">
      <p>选中的行：{{ selectedRow }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: [
        { id: 1, name: '行1' },
        { id: 2, name: '行2' },
        { id: 3, name: '行3' }
      ],
      selectedRow: null
    };
  },
  methods: {
    selectRow(row) {
      this.selectedRow = row;
    }
  }
};
</script>

上述代码以表格的形式展示了一个列表，每行包含一个单选按钮，点击行的任意位置都可以选中该行。选中的行数据存储在selectedRow变量中，并显示在页面上。