ElementUI radio組件選中小改造
ElementUI 是自己比較鐘愛的一套 vue 組件庫,自己好幾個(gè)項(xiàng)目里都在用它。一直以來這些豐富的組件,讓我能快速的搞定各種后臺管理頁面,極大地提高了工作效率。
但是不管什么軟件,肯定都沒辦法稱之為完美,而最近的幾個(gè)小需求中,也發(fā)現(xiàn)了 element ui 的一些不足(也可能是因?yàn)樽约旱男枨蟊容^奇葩吧)。其中一點(diǎn)就是本文要提到的,radio 綁定對象類型值的問題。
具體現(xiàn)象就是,當(dāng)通過 mapState 方法自動一個(gè)計(jì)算對象數(shù)組,然后將它綁定到 el-radio 上時(shí),el-radio-group 里的 el-radio 無法根據(jù)其綁定值正確的顯示 checked 狀態(tài)。
例如下面這段代碼:
<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>當(dāng)前選中</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
但當(dāng)運(yùn)行代碼之后看到,第三個(gè) el-radio 并沒有像預(yù)期的那樣處于選中狀態(tài)。
查看代碼時(shí)發(fā)現(xiàn),el-radio 里的 checked 是根據(jù) this.model === this.label
來判斷的(見代碼),而當(dāng) this.model 和 this.label 都是對象是,它們必須是引用同一個(gè)對象才會“恒等”。
得益于 Vue 提供的 extends 屬性,我們可以輕松的擴(kuò)展官方原來的 el-radio 組件,對其稍加改造,就可以解決這個(gè)問題。
<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 選項(xiàng)來擴(kuò)展官方的 el-radio extends: Radio, computed: { // IMPORTANT: 改寫部分,主要是支持 object 類型的值 isChecked () { return isEqual(this.model, this.label) }, }, } </script>
改造完成后,引用這個(gè)組件并替換掉原來模板里用到的 el-radio,刷新頁面后會發(fā)現(xiàn),radio 的初始選中狀態(tài)正常了。
實(shí)際上,el-checkbox/el-checkbox-group 也有類似的問題,也是可以解決的,但看過源碼之后,發(fā)現(xiàn) el-checkbox 的一些邏輯與 el-radio 又有不小差別,畢竟它綁定的可能就是對象數(shù)組,所以具體處理起來會有些不一樣,本文就不具體介紹了,如果各位有興趣可以自行探索。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
VUE搭建分布式醫(yī)療掛號系統(tǒng)的前臺預(yù)約掛號步驟詳情
這篇文章主要介紹了VUE搭建分布式醫(yī)療掛號系統(tǒng)的前臺預(yù)約掛號步驟詳情,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04element table組件內(nèi)容換行的實(shí)現(xiàn)方案
這篇文章主要介紹了element table組件內(nèi)容換行的實(shí)現(xiàn)方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12Vue 報(bào)錯(cuò)Error: No PostCSS Config foun
這篇文章主要介紹了Vue 報(bào)錯(cuò)Error: No PostCSS Config found問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07Vue3組件掛載之創(chuàng)建組件實(shí)例詳解
這篇文章主要為大家介紹了Vue3組件掛載之創(chuàng)建組件實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10VUE前端導(dǎo)出文件之file-saver插件安裝使用教程
這篇文章主要給大家介紹了關(guān)于VUE前端導(dǎo)出文件之file-saver插件安裝使用的相關(guān)資料,file-saver是一個(gè)用于保存文件的JavaScript庫,它提供了一種簡單的方式來生成和保存文件,支持各種文件類型,例如文本文件、圖片、PDF等,需要的朋友可以參考下2024-05-05Vue實(shí)現(xiàn)將數(shù)據(jù)庫中帶html標(biāo)簽的內(nèi)容輸出(原始HTML(Raw HTML))
今天小編就為大家分享一篇Vue實(shí)現(xiàn)將數(shù)據(jù)庫中帶html標(biāo)簽的內(nèi)容輸出(原始HTML(Raw HTML)),具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10Vue或者React項(xiàng)目配置@路徑別名及智能提示方案
這篇文章主要介紹了Vue或者React項(xiàng)目配置@路徑別名及智能提示方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10