序章
フロントエンドのレベルが良くありません。この記事では、個人プロジェクトのフロントエンド コードを作成するときに発生したエコー問題の解決策を参考として共有します。
問題の回復
まず、フォーム内の問題コードが表示されます。今回のフロントエンド設計は、操作の追加や変更を行う一般的なフォームですが、ドロップダウンボックスの表示フォームがあり、規約に従って、変更をクリックしたときにエコーが確実に表示されるように、:value によって双方向バインディングが実行されます。
<!--表单区域-->
<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: [],
}
まず、クリックして変更したときの効果を確認します。
エコーは正常であることがわかりますが、テスト中にロールを作成するためにクリックすると正常に表示できないことがわかりました。
問題分析
オンライン調査と個人的なテストを通じて、ドロップダウン ボックスの v-model バインディング タイプが一致する必要があることがわかりました。たとえば、ここで受け取る値は数値である必要がありますが、フォームで指定されるデフォルト値は '1' (文字列型) です。次に、それを正しい 1 に変更します。
このようにして問題は解決されます
コードシェアフォームを共有する
この部分のロジックは実は非常に単純で、未固定のタイトルを追加し、クリックに応じて変更します。
形状
<!--表单区域-->
<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>
データの内容
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'}],
},
メソッドの内容
// 添加窗口
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('修改失败');
}
})
}
}
});
},