ElementUI是一组最受欢迎的vue组件库，在几个项目中使用。一直以来，这些丰富的组件让我能够快速修复各种后台管理页面，大大提高了工作效率。

但是不管是什么样的软件，都不能称之为完美，最近几个小需求中也发现了element ui的一些缺点(也可能是因为自己的需求很精彩)。本文中提到的问题之一是无线电绑定对象类型值的问题。

具体现象是，当通过mapState方法自动生成一个计算对象的数组，然后绑定到el-radio时，el-radio-group中的el-radio无法根据其绑定值正确显示选中状态。

例如，以下代码：

模板div id=' app ' El-radio-group v-model=' CheckedUser ' El-radio v-for='(user，Index)在users ' : key=' Index ' : label=' user ' : value=' user ' { ` $ { user。名称} ($ {user。age}岁)`}/El-radio/El-radio-group H2当前已从' vuex ' export default { name : ' app，Data(){ return { checked user : { name : ' c '，age: 1，}，}}中选择/H2 pre { { checked user 3360 ' c }，user: { name:1，}，computed:映射状态({ users: state=state。users})}，}/script其中users是vuex store中的状态。

从' vue '导入Vue从' vuex'Vue.use(Vuex)const store导入Vuex=new Vuex。store({ state : { users :[{ name : ' A '，age: 18，}，{name:' b '，age: 20，}，{name:' c '，age: 1，}，]}，})导出默认存储，但在运行代码后，我们可以看到第三个el-radio并未按预期选中。

查看代码，发现在el-radio中的checked是根据this.model===this.label来判断的(参见代码)，但是当this.model和this.label都是对象时，它们必须引用同一个对象才能“相等”。

得益于Vue提供的extends属性，我们可以轻松扩展最初的官方el-radio组件，并通过稍微修改来解决这个问题。

模板标签class=' El-radio ' : class='[border RadioSize？'El-radio-' radio ize : ' '，{ 'is-disabled': isDisabled }，{ 'is-focus': focus }，{ ' is-border ' : border }，{ 'is-checked': isChecked } ]'角色=' radio ' : aria-checked=' isChecked ' : aria-disabled=' isDisabled ' : tabIndex=' tabIndex ' @ key down space。model : label ' span class=' El-radio _ _ input ' : class=' { ' is-disabled ' : is-checked ' span class=' El-radio _ _ input '/span input ref=' radio ' class=' El-radio _ _ origin ' : value=' label ' type=' radio ' aria-hidden=' true ' v-model=' model ' @ focus=' focus=true ' @ blur=' focus=false$ slots . default“{ label } }/template/span/label/templatescript import { isEqual } From ' lodash ' import { Radio } From ' element-ui ' export default { name : ' my Radio '，//使用extemds选项扩展官方El-radio extends 3360 radio，computed : {//Important :重写。主要支持值ischecked () {return等于(this。模特，这个。label)}、}、}/script。转换完成后，引用该组件并替换原始模板中使用的el-radio。刷新页面后，会发现收音机的初始选中状态是正常的。

其实el-checkbox/el-checkbox-group也有类似的问题，可以解决。然而，在阅读源代码后，发现el-checkbox的一些逻辑与el-radio大不相同。毕竟可能绑定了一个对象数组，所以具体处理会有些不同。本文就不详细介绍了。如果你感兴趣，你可以自己探索。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。