Table of contents
Introduction
My front-end level is not good. This article shares the solution to the echo problem encountered when writing the front-end code of my personal project, for reference only.
problem recovery
Firstly, the problem code in the form is displayed. The front-end design this time is a common form for adding and modifying operations, but there is a drop-down box display form. According to the convention, two-way binding is carried out through :value to ensure the echo when clicking to modify.
<!--表单区域-->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
<el-form ref="form" :model="form" :rules="formRules" label-width="100px">
...
<el-form-item label="状态" prop="status">
<el-select v-model="form.status" placeholder="请选择">
<el-option label="启用" :value="1"></el-option>
<el-option label="禁用" :value="0"></el-option>
</el-select>
</el-form-item>
...
</el-form>
</el-dialog>
<!--表单内容如下-->
form: {
id: 0,
roleName: '',
permission: '',
status: '1', // 默认设置为启用状态
createTime: '',
remark: '',
businesses: [],
}
First look at the effect when you click to modify
It can be seen that the echo is normal, but during the test, it is found that if you click to create a role, it cannot be displayed normally.
problem analysis
Through online research and personal testing, it is found that the v-model binding type of the drop-down box must match. For example, the value received here should be number, but the default value given in our form is '1', which is of string type. Now we change it to the correct 1
This way the problem is solved
share form code share
This part of the logic is actually very simple. Add an unfixed title and modify it according to the click.
form
<!--表单区域-->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
<el-form ref="form" :model="form" :rules="formRules" label-width="100px">
<el-form-item label="角色名称" prop="roleName">
<el-input v-model="form.roleName"></el-input>
</el-form-item>
<el-form-item label="权限字符" prop="permission">
<el-input v-model="form.permission"></el-input>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="form.status" placeholder="请选择">
<el-option label="启用" :value="1"></el-option>
<el-option label="禁用" :value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="业务系统" prop="businesses">
<el-select v-model="form.businesses" multiple placeholder="请选择业务系统">
<el-option v-for="business in businesses" :key="business.id" :label="business.businessName" :value="business.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input type="textarea" v-model="form.remark"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSave">保存</el-button>
</div>
</el-dialog>
content in data
dialogVisible: false,
dialogFlag: '',
dialogTitle: '',
form: {
id: 0,
roleName: '',
permission: '',
status: 1, // 默认设置为启用状态
createTime: '',
remark: '',
businesses: [],
},
formRules: {
roleName: [{
required: true, message: '请输入角色名称', trigger: 'blur'}],
permission: [{
required: true, message: '请输入权限字符', trigger: 'blur'}],
businesses: [{
required: false, message: '请选择业务系统', trigger: 'blur'}],
},
Contents in methods
// 添加窗口
handleCreate() {
this.dialogVisible = true;
this.dialogFlag = 'save';
this.dialogTitle = '添加角色';
// 清空表单数据
this.form = {
id: 0,
roleName: '',
permission: '',
status: 1,
createTime: '',
remark: '',
businesses: [],
};
this.selectedBusinesses = [];
},
// 编辑窗口
handleEdit(row) {
console.log(row)
this.dialogVisible = true;
this.dialogFlag = 'edit';
this.dialogTitle = '编辑角色';
// 设置表单数据
this.form = {
id: row.id,
roleName: row.roleName,
permission: row.permission,
status: row.status,
createTime: row.createTime,
remark: row.remark,
businesses: row.ids,
};
this.selectedBusinesses = this.form.businesses;
},
// 添加或修改
handleSave() {
this.$refs.form.validate((valid) => {
// 校验
if (valid) {
// 构造角色对象
const role = {
id: this.form.id,
roleName: this.form.roleName,
permission: this.form.permission,
status: this.form.status,
ids: this.form.businesses,
remark: this.form.remark,
};
// 添加
if (this.dialogFlag === 'save'){
axios({
method: "post",
data: role,
url: this.urls.insert
}).then((res) => {
if (res.data.status === 0){
this.$message.success('添加成功');
// 保存成功后关闭对话框
this.dialogVisible = false;
this.pagingQuery();
}else{
this.$message.error('添加失败');
}
})
}
// 修改
if (this.dialogFlag === 'edit'){
axios({
method: "post",
data: role,
url: this.urls.update
}).then((res) => {
if (res.data.status === 0){
this.$message.success('修改成功');
// 保存成功后关闭对话框
this.dialogVisible = false;
}else{
this.$message.error('修改失败');
}
})
}
}
});
},