vue使用element实现Radio单选

官方的基础用法

<template>
  <el-radio-group v-model="radio">
    <el-radio :label="1">备选项</el-radio>
    <el-radio :label="2">备选项</el-radio>
  </el-radio-group>
</template>

<script>
  export default {
    data () {
      return {
        radio: 1
      };
    }
  }
</script>
@chang是触发事件

项目应用

1、样式：在弹出框中选择同意/拒绝 点击保存后提交到后台

2、后台接口参数：

 {
        "taskApproved": "",
        "taskId": "",
      }

3、样式代码

  <el-radio-group v-model="editForm.taskApproved" @change="changeLabel">
          <el-radio :label="'1'">同意</el-radio>
          <el-radio :label="'2'">拒绝</el-radio>
        </el-radio-group>

4、data

taskApply: {
        taskApproved: "",
        taskId: "",
      },
 radio: "", //同意/拒绝

5、显示编辑弹窗=》点击单选框=》保存=》刷新页面

//显示编辑界面
    handleEdit: function (index, row) {
      this.handleFormVisible = true;
      this.title = "操作";
      this.editForm.taskId = row.taskId;
    },
    changeLabel: function (val) {
      this.editForm.taskApproved = val;
    },
    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.taskApply.taskId = this.editForm.taskId;
      this.taskApply.taskApproved = this.editForm.taskApproved;
      taskApply(this.taskApply)
        .then((res) => {
          this.editFormVisible = false;
          this.loading = false;
          if (res.status == 200) {
            this.handleFormVisible = false;
            this.getdata(this.formInline);
            this.$message({
              type: "success",
              message: "操作成功！",
            });
          } else {
            this.$message({
              type: "info",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.handleFormVisible = false;
          this.loading = false;
          this.$message.error("操作失败，请稍后再试！");
        });
    },