element-ui使用v-for来遍历el-radio - 学习记录帖

AlexKain

已于 2022-04-20 21:08:41 修改

阅读量2.9w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 日常学习和储备[暂存区] 文章标签： el-radio

于 2018-07-31 10:29:35 首次发布

本文链接：https://blog.youkuaiyun.com/webfullstack/article/details/81297633

vue 同时被 3 个专栏收录

32 篇文章

订阅专栏

element-ui

28 篇文章

订阅专栏

日常学习和储备[暂存区]

24 篇文章

订阅专栏

本文介绍如何使用Element UI框架中的表单组件来实现员工性别的选择功能，包括如何设置单选按钮组，以及如何通过v-model双向绑定数据，并监听选择变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-form-item label="员工性别" label-width="1rem" prop="sttusCodes">
  <el-radio-group v-model="radio" @change="onRadioChange">
	  <el-radio :label="item.value" :key="item.value" v-for="item in form.sttusCodes">{{item.label}}</el-radio>
  </el-radio-group>
</el-form-item>

export default {
  data() {
    return {
      imgSrc: "../../static/images/tx.jpg",
      radio: "1",
      form: {        
          sttusCodes: [
            {
              label: "男",
              value: "0",
              selected: "1"
            },
            {
              label: "女",
              value: "1",
              selected: "0"
            }
          ],
    }
  },
  methods: {
      onRadioChange(item) {
      console.log("item", item);
    }
  }
}