ElementUI radio组件选中小改造


Posted in Javascript onAugust 12, 2019

ElementUI 是自己比较钟爱的一套 vue 组件库,自己好几个项目里都在用它。一直以来这些丰富的组件,让我能快速的搞定各种后台管理页面,极大地提高了工作效率。

但是不管什么软件,肯定都没办法称之为完美,而最近的几个小需求中,也发现了 element ui 的一些不足(也可能是因为自己的需求比较奇葩吧)。其中一点就是本文要提到的,radio 绑定对象类型值的问题。

具体现象就是,当通过 mapState 方法自动一个计算对象数组,然后将它绑定到 el-radio 上时,el-radio-group 里的 el-radio 无法根据其绑定值正确的显示 checked 状态。

例如下面这段代码:

<template>
 <div id="app">
  <el-radio-group
   v-model="checkedUser"
  >
   <el-radio
    v-for="(user, index) in users"
    :key="index"
    :label="user"
    :value="user"
   >
    {{ `${user.name}(${user.age}岁)` }}
   </el-radio >
  </el-radio-group>

  <h2>当前选中</h2>
  <pre>{{ checkedUser }}</pre>
 </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
 name: 'app',

 data () {
  return {
   checkedUser: {
    name: 'C',
    age: 1,
   },
  }
 },

 computed: {
  ...mapState({
   users: state => state.users
  })
 },
}
</script>

其中 users 为 vuex store 中的 state。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
 state: {
  users: [
   {
    name: 'A',
    age: 18,
   },
   {
    name: 'B',
    age: 20,
   },
   {
    name: 'C',
    age: 1,
   },
  ]

 },
})

export default store

但当运行代码之后看到,第三个 el-radio 并没有像预期的那样处于选中状态。

ElementUI radio组件选中小改造

查看代码时发现,el-radio 里的 checked 是根据 this.model === this.label 来判断的(见代码),而当 this.model 和 this.label 都是对象是,它们必须是引用同一个对象才会“恒等”。

得益于 Vue 提供的 extends 属性,我们可以轻松的扩展官方原来的 el-radio 组件,对其稍加改造,就可以解决这个问题。

<template>
 <label
  class="el-radio"
  :class="[
   border && radioSize ? 'el-radio--' + radioSize : '',
   { 'is-disabled': isDisabled },
   { 'is-focus': focus },
   { 'is-bordered': border },
   { 'is-checked': isChecked }
  ]"
  role="radio"
  :aria-checked="isChecked"
  :aria-disabled="isDisabled"
  :tabindex="tabIndex"
  @keydown.space.stop.prevent="model = isDisabled ? model : label"
 >
  <span class="el-radio__input"
     :class="{
    'is-disabled': isDisabled,
    'is-checked': isChecked
   }"
  >
   <span class="el-radio__inner"></span>
   <input
    ref="radio"
    class="el-radio__original"
    :value="label"
    type="radio"
    aria-hidden="true"
    v-model="model"
    @focus="focus = true"
    @blur="focus = false"
    @change="handleChange"
    :name="name"
    :disabled="isDisabled"
    tabindex="-1"
   >
  </span>
  <span class="el-radio__label" @keydown.stop>
   <slot></slot>
   <template v-if="!$slots.default">{{label}}</template>
  </span>
 </label>
</template>

<script>
import { isEqual } from 'lodash'
import { Radio } from 'element-ui'

export default {
 name: 'MyRadio',

 // 使用 extemds 选项来扩展官方的 el-radio
 extends: Radio,

 computed: {
  // IMPORTANT: 改写部分,主要是支持 object 类型的值
  isChecked () {
   return isEqual(this.model, this.label)
  },
 },
}
</script>

改造完成后,引用这个组件并替换掉原来模板里用到的 el-radio,刷新页面后会发现,radio 的初始选中状态正常了。

ElementUI radio组件选中小改造

实际上,el-checkbox/el-checkbox-group 也有类似的问题,也是可以解决的,但看过源码之后,发现 el-checkbox 的一些逻辑与 el-radio 又有不小差别,毕竟它绑定的可能就是对象数组,所以具体处理起来会有些不一样,本文就不具体介绍了,如果各位有兴趣可以自行探索。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
ext 代码生成器
Aug 07 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 #Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 #Javascript
react实现antd线上主题动态切换功能
Aug 12 #Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 #Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 #Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 #Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 #Javascript
You might like
Zend Guard一些常见问题解答
2008/09/11 PHP
php5.3 废弃函数小结
2010/05/16 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
在Python的web框架中配置app的教程
2015/04/30 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
Python判断有效的数独算法示例
2019/02/23 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
一行python实现树形结构的方法
2019/08/09 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
村主任“四风”问题个人整改措施
2014/10/04 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书