vue 3 ts element plus根据返回数据选中单选按钮

假设你有一个数据列表，其中每个数据项都有一个唯一的 ID，以及一个表示该项是否被选中的布尔值。你可以使用 Element Plus 的 `<el-radio>` 组件来实现单选按钮的选择。具体的步骤如下：

1. 在 Vue 组件中定义一个变量，用于存储选中项的 ID。

   selectedItemId: number | null = null;

2. 在模板中使用 `<el-radio>` 组件来渲染数据列表，并将选中项的 ID 绑定到 `selectedItemId` 变量上。

   <template>
     <div>
       <el-radio v-for="item in dataList"
                 :key="item.id"
                 :label="item.id"
                 v-model="selectedItemId">
         {{ item.name }}
       </el-radio>
     </div>
   </template>

3. 如果你的数据列表中已经有某个项被选中，你需要在组件的 `mounted` 生命周期钩子中初始化 `selectedItemId` 变量。

   mounted() {
     const selectedItem = this.dataList.find(item => item.isSelected);
     if (selectedItem) {
       this.selectedItemId = selectedItem.id;
     }
   }

4. 当你接收到新的数据列表时，你需要更新 `selectedItemId` 变量的值，以便正确地显示当前选中的项。

   watch: {
     dataList() {
       const selectedItem = this.dataList.find(item => item.isSelected);
       if (selectedItem) {
         this.selectedItemId = selectedItem.id;
       } else {
         this.selectedItemId = null;
       }
     }
   }

这样，当你接收到新的数据列表时，已选中的项的单选按钮就会自动选中。如果没有任何项被选中，则所有单选按钮都不会被选中。