添加数据属性和方法-你可以这样定义-当用户点击某一行时事件会触发将这行数据设置为选中
一、添加数据属性和方法
在Vue实例中创建一个用于存储当前选中行的数据属性。比如，你可以这样定义：
```javascript data() { return { selectedRow: null }; } ``` 这个属性将记录用户点击的行数据，而方法将负责更新这个值。二、创建表格并绑定数据
然后，创建一个表格，并将数据绑定到这个表格上。假设你有一个名为 `rows` 的数据数组：
```javascript data() { return { selectedRow: null, rows: [ // ... 行数据 ] }; } ``` 在表格中，你将使用指令来遍历数组，并为每一行添加一个单选按钮。当用户点击某一行时，事件会触发，将这行数据设置为选中。指令用于添加一个CSS类，以便在选中行上应用特定样式。三、添加样式
为了高亮显示选中的行，你可以在CSS中添加以下样式：
```css .selected-row { background-color: #f0f0f0; } ``` 这样，当用户点击某一行时，该行将被高亮显示。四、完整示例代码
以下是一个将上述所有步骤整合在一起的完整示例代码：
```html| {{ row.name }} | {{ row.age }} |
五、进一步优化和扩展
你可以通过以下方式进一步优化和扩展你的表格单选功能：
- 使用组件化：将表格单选功能封装成一个Vue组件，方便在不同页面或项目中复用。
- 添加取消选中功能：通过判断当前选中的行是否为点击行，来实现点击相同行时取消选中。
- 增强样式：通过更多的CSS样式或使用CSS框架如Bootstrap，来增强表格的视觉效果。