vue使用element实现Radio单选
1、样式:在弹出框中选择同意/拒绝 点击保存后提交到后台。5、显示编辑弹窗=》点击单选框=》保存=》刷新页面。
·
官方的基础用法
<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("操作失败,请稍后再试!");
});
},
更多推荐
已为社区贡献2条内容
所有评论(0)