欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ElementUI radio組件選中小改造

 更新時(shí)間:2019年08月12日 11:17:47   作者:田較瘦  
這篇文章主要介紹了ElementUI radio組件選中小改造,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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里如何主動銷毀keep-alive緩存的組件

    vue里如何主動銷毀keep-alive緩存的組件

    這篇文章主要介紹了vue里如何主動銷毀keep-alive緩存的組件,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • VUE搭建分布式醫(yī)療掛號系統(tǒng)的前臺預(yù)約掛號步驟詳情

    VUE搭建分布式醫(yī)療掛號系統(tǒng)的前臺預(yù)約掛號步驟詳情

    這篇文章主要介紹了VUE搭建分布式醫(yī)療掛號系統(tǒng)的前臺預(yù)約掛號步驟詳情,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-04-04
  • element table組件內(nèi)容換行的實(shí)現(xiàn)方案

    element table組件內(nèi)容換行的實(shí)現(xiàn)方案

    這篇文章主要介紹了element table組件內(nèi)容換行的實(shí)現(xiàn)方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-12-12
  • Vue 報(bào)錯(cuò)Error: No PostCSS Config found問題及解決

    Vue 報(bào)錯(cuò)Error: No PostCSS Config foun

    這篇文章主要介紹了Vue 報(bào)錯(cuò)Error: No PostCSS Config found問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • Vue3組件掛載之創(chuàng)建組件實(shí)例詳解

    Vue3組件掛載之創(chuàng)建組件實(shí)例詳解

    這篇文章主要為大家介紹了Vue3組件掛載之創(chuàng)建組件實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-10-10
  • VUE前端導(dǎo)出文件之file-saver插件安裝使用教程

    VUE前端導(dǎo)出文件之file-saver插件安裝使用教程

    這篇文章主要給大家介紹了關(guān)于VUE前端導(dǎo)出文件之file-saver插件安裝使用的相關(guān)資料,file-saver是一個(gè)用于保存文件的JavaScript庫,它提供了一種簡單的方式來生成和保存文件,支持各種文件類型,例如文本文件、圖片、PDF等,需要的朋友可以參考下
    2024-05-05
  • Vue狀態(tài)管理庫Pinia詳細(xì)介紹

    Vue狀態(tài)管理庫Pinia詳細(xì)介紹

    這篇文章主要介紹了Vue3-pinia狀態(tài)管理,pinia是 vue3 新的狀態(tài)管理工具,簡單來說相當(dāng)于之前 vuex,它去掉了 Mutations 但是也是支持 vue2 的,需要的朋友可以參考下
    2022-08-08
  • Vue實(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))

    今天小編就為大家分享一篇Vue實(shí)現(xiàn)將數(shù)據(jù)庫中帶html標(biāo)簽的內(nèi)容輸出(原始HTML(Raw HTML)),具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • table表格中使用el-popover 無效問題解決方法

    table表格中使用el-popover 無效問題解決方法

    這篇文章主要介紹了table表格中使用el-popover 無效問題解決方法,實(shí)例只針對單個(gè)的按鈕管用在表格里每一列都有el-popover相當(dāng)于是v-for遍歷了 所以我們在觸發(fā)按鈕的時(shí)候并不是單個(gè)的觸發(fā)某一個(gè),需要的朋友可以參考下
    2024-01-01
  • Vue或者React項(xiàng)目配置@路徑別名及智能提示方案

    Vue或者React項(xiàng)目配置@路徑別名及智能提示方案

    這篇文章主要介紹了Vue或者React項(xiàng)目配置@路徑別名及智能提示方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10

最新評論