el-radio の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• +Vue+el-radio へ行く。
• +Vue+el-radio の差分を削除

#author("2022-05-16T15:23:25+08:00","default:Admin","Admin")
#author("2022-05-16T15:23:40+08:00","default:Admin","Admin")
[[Vue]]

&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents

* 使用 el-radio [#kd9d4285]

示例一：
#codeprettify{{
<el-form-item label="性别">
  <el-radio-group v-model="form.gender" style="margin-bottom: 0">
    <el-radio label="false">男</el-radio>
    <el-radio label="true">女</el-radio>
  </el-radio-group>
</el-form-item>
}}

示例二：
#codeprettify{{
<el-table ref="sensorTable" :data="tableData" tooltip-effect="dark" height="255" style="width: 100%" @current-change="clickChange">
   <el-table-column label="选择" width="55">
     <template slot-scope="scope">
       <el-radio v-model="tableRadio" :label="scope.row"><i /></el-radio>
     </template>
   </el-table-column>
}}

** 不使用 el-radio [#f310edd0]
* 不使用 el-radio [#f310edd0]

** 使用v-for循环的radio单选框 [#c44a2819]

#codeprettify{{
<template>
 <div>
  <label v-for="(item, index) in radioData" :key="index">
   <input type="radio" v-model="radioVal" :value="item.value" @change="getRadioVal"/>
   \{\{ item.value \}\}
  </label>
 </div>
</template>
 
<script>
export default {
 data() {
  return {
   radioData: [
    { value: '全部' },
    { value: '部分' },
    { value: '零散' }
   ],
   radioVal: '全部' // 用于设置默认选中项
  };
 },
 methods: {
  getRadioVal() {
   console.log(this.radioVal);
  }
 }
};
</script>
}}

** 不使用v-for循环的radio单选框 [#gd4deecc]

#codeprettify{{
<template>
 <div>
  <label><input v-model="radioVal" type="radio" value="全部" @change="getRadioVal">全部</label>
  <label><input v-model="radioVal" type="radio" value="部分" @change="getRadioVal">部分</label>
  <label><input v-model="radioVal" type="radio" value="零散" @change="getRadioVal">零散</label>
 </div>
</template>
<script>
export default {
 data() {
  return {
   radioVal: '全部' // 用于设置默认选中项
  };
 },
 methods: {
  getRadioVal() { 
   console.log(this.radioVal);
  }
 }
};
</script>
}}

#hr();
コメント：
#comment_kcaptcha