element-ui 单选按钮赋值

在Vue项目中,作者遇到文章编辑功能中单选按钮(el-radio)绑定值无法正常显示的问题。通过查看上一篇文章(链接省略),尝试了两种不同的代码实现方式。第一种直接使用`el-radio`,第二种改用`el-radio-group`配合`el-radio`。最终,发现使用`el-radio-group`的代码能正确渲染出预期效果,实现了文章重要性的普通和置顶选项选择。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

接上文,文章编辑功能,单选按钮绑定值的时候有些问题,不清楚的建议看一下上一篇文章:https://blog.youkuaiyun.com/qq_39704057/article/details/119993871?spm=1001.2014.3001.5501

想要达到的效果

但是不知道为什么,页面上一直没有渲染出来,

 用的代码

<el-form-item label="文章重要性" class="block">
    <el-radio v-model="form.article_type"  label="1">普通</el-radio>    
    <el-radio v-model="form.article_type" label="2">置顶</el-radio>
</el-form-item>

然后换了一种代码,就好了

<el-form-item label="文章重要性" class="block">
    <el-radio-group v-model="form.article_type">
        <el-radio :label="1">普通</el-radio>
        <el-radio :label="2">置顶</el-radio>
    </el-radio-group>
</el-form-item>

### Element Plus `el-cascader` 组件实现懒加载与多选回显 #### 懒加载功能配置 为了使 `el-cascader` 支持懒加载,需设置属性 `options` 为空数组,并通过异步请求获取子节点数据。当用户展开某个节点时触发回调函数来加载该节点下的选项。 ```javascript const loadOptions = async (node, resolve) => { const { value } = node; let result; try { // 假设这里调用了后端API并返回了响应结果 result = await fetchChildNodes(value); // 将获取到的数据传递给resolve方法完成渲染 resolve(result.map(item => ({ value: item.id, label: item.name, leaf: !item.hasChildren }))); } catch(error){ console.error('Failed to load options:', error); resolve([]); } }; ``` 此部分逻辑应放在组件内部定义的方法里[^1]。 #### 多选模式下保存已选择项 对于支持多选的情况(`multiple=true`),可以通过监听输入框变化事件更新本地状态变量存储当前所选: ```html <template> <!-- ... --> <el-cascader v-model="selectedValues" multiple :props="{ lazyLoad: true, checkStrictly: false}" @change="handleChange"> </el-cascader> </template> <script setup lang="ts"> import { ref } from 'vue'; let selectedValues = ref([]); function handleChange(values){ // 更新selectedValues的状态 } </script> ``` 此处需要注意的是,在多选场景中,如果希望父级节点被勾选时不自动全选其所有子节点,则可以将 `checkStrictly` 设置为 `true`[^2]。 #### 编辑状态下恢复初始选择 为了让编辑页面能够正确展示之前已经做出的选择,可以在初始化阶段根据已有记录填充 `v-model` 对应的绑定字段。假设服务器端提供了完整的路径信息作为参数传入前端应用: ```typescript // 获取详情接口成功后的处理逻辑 async function getDetail(id:string):Promise<void>{ const res=await api.get(`/api/detail/${id}`); // 如果是单选则直接赋值;如果是多选则遍历每一条记录分别push进去 form.value.cascadeValue=res.data.singleSelect ? [res.data.path.split(',')] : res.data.multiPaths.map(path=>path.split(',')); // 渲染视图... } onMounted(() => { if(route.params.id){ // 判断是否存在ID表示处于编辑态 getDetail(String(route.params.id)); } }); ``` 上述代码片段展示了如何基于不同情况(单选或多选),利用逗号分隔字符串形式的路径构建起始列表[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值