ElementPlus Radio 單選框

在一組備選項(xiàng)中進(jìn)行單選

基礎(chǔ)用法

由于選項(xiàng)默認(rèn)可見，不宜過多，若選項(xiàng)過多，建議使用 Select 選擇器。

要使用 Radio 組件，只需要設(shè)置v-model綁定變量，選中意味著變量的值為相應(yīng) Radio ?label?屬性的值，?label?可以是?String?、?Number?或?Boolean?。

<template>
  <div>
    <el-radio v-model="radio1" label="1">備選項(xiàng)1</el-radio>
    <el-radio v-model="radio1" label="2">備選項(xiàng)2</el-radio>
  </div>
  <div>
    <el-radio v-model="radio2" label="1" size="medium">備選項(xiàng)1</el-radio>
    <el-radio v-model="radio2" label="2" size="medium">備選項(xiàng)2</el-radio>
  </div>
  <div>
    <el-radio v-model="radio3" label="1" size="small">備選項(xiàng)1</el-radio>
    <el-radio v-model="radio3" label="2" size="small">備選項(xiàng)2</el-radio>
  </div>
  <div>
    <el-radio v-model="radio4" label="1" size="mini">備選項(xiàng)1</el-radio>
    <el-radio v-model="radio4" label="2" size="mini">備選項(xiàng)2</el-radio>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        radio1: '1',
        radio2: '1',
        radio3: '1',
        radio4: '1',
      }
    },
  }
</script>

禁用狀態(tài)

單選框不可用的狀態(tài)。

只要在el-radio元素中設(shè)置disabled屬性即可，它接受一個Boolean，true為禁用。

<template>
  <el-radio disabled v-model="radio" label="禁用">備選項(xiàng)</el-radio>
  <el-radio disabled v-model="radio" label="選中且禁用">備選項(xiàng)</el-radio>
</template>

<script>
  export default {
    data() {
      return {
        radio: '選中且禁用',
      }
    },
  }
</script>

單選框組

適用于在多個互斥的選項(xiàng)中選擇的場景

結(jié)合el-radio-group元素和子元素el-radio可以實(shí)現(xiàn)單選組，在el-radio-group中綁定v-model，在el-radio中設(shè)置好label即可，無需再給每一個el-radio綁定變量，另外，還提供了change事件來響應(yīng)變化，它會傳入一個參數(shù)?value?。

<template>
  <el-radio-group v-model="radio">
    <el-radio :label="3">備選項(xiàng)</el-radio>
    <el-radio :label="6">備選項(xiàng)</el-radio>
    <el-radio :label="9">備選項(xiàng)</el-radio>
  </el-radio-group>
</template>

<script>
  export default {
    data() {
      return {
        radio: 3,
      }
    },
  }
</script>

按鈕樣式

按鈕樣式的單選組合。

只需要把?el-radio?元素?fù)Q成?el-radio-button?元素即可，此外，?Element Plus? 還提供了size屬性。

<template>
  <div>
    <el-radio-group v-model="radio1">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="廣州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio2" size="medium">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="廣州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio3" size="small">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京" disabled></el-radio-button>
      <el-radio-button label="廣州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio4" disabled size="mini">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="廣州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>
</template>
<script>  export default {
    data() {
      return {
        radio1: '上海',
        radio2: '上海',
        radio3: '上海',
        radio4: '上海',
      }
    },
  }
</script>

帶有邊框

設(shè)置border屬性可以渲染為帶有邊框的單選框。

<template>
  <div>
    <el-radio v-model="radio1" label="1" border>備選項(xiàng)1</el-radio>
    <el-radio v-model="radio1" label="2" border>備選項(xiàng)2</el-radio>
  </div>
  <div style="margin-top: 20px">
    <el-radio v-model="radio2" label="1" border size="medium">備選項(xiàng)1</el-radio>
    <el-radio v-model="radio2" label="2" border size="medium">備選項(xiàng)2</el-radio>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio3" size="small">
      <el-radio label="1" border>備選項(xiàng)1</el-radio>
      <el-radio label="2" border disabled>備選項(xiàng)2</el-radio>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio4" size="mini" disabled>
      <el-radio label="1" border>備選項(xiàng)1</el-radio>
      <el-radio label="2" border>備選項(xiàng)2</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        radio1: '1',
        radio2: '1',
        radio3: '1',
        radio4: '1',
      }
    },
  }
</script>

Radio Attributes

Radio Events

Radio-group Attributes

Radio-group Events

Radio-button Attributes