济南的企业网站,成都自然排名优化,网页制作公司深圳,wordpress自动适应手机1. 问题描述 需求#xff1a;在使用ElementUI时#xff0c;通过el-select和el-option标签实现下拉列表功能#xff0c;当el-option中的选项被选中时#xff0c;被选中的选项可以正确回显到已选择的列表中。 对于上面的下拉列表#xff0c;当我们选中“超级管理员”的选项…1. 问题描述 需求在使用ElementUI时通过el-select和el-option标签实现下拉列表功能当el-option中的选项被选中时被选中的选项可以正确回显到已选择的列表中。 对于上面的下拉列表当我们选中“超级管理员”的选项时该选项应该和“友链审核员”同处于已选中的列表中但是该现象并没有发生。同时提交数据时却能将“超级管理员”被选中的数据提交本文解决此问题。 2. 代码示例
2.1 ui代码
el-dialog :titletitle :visible.syncopen width600px append-to-bodyel-form refform :modelform :rulesrules label-width80pxel-rowel-col :span24el-form-item label角色el-select v-modelform.roleIds multiple placeholder请选择el-optionv-foritem in roleOptions:keyitem.id:labelitem.roleName:valueitem.id:disableditem.status 1//el-select/el-form-item/el-col/el-row/el-formdiv slotfooter classdialog-footerel-button typeprimary clicksubmitForm确 定/el-button/div
/el-dialog2.2 js代码
export default {data() {return {// ...}},methods: {// 表单重置reset() {this.form {id: undefined,userName: undefined,nickName: undefined,password: undefined,phonenumber: undefined,email: undefined,sex: undefined,status: 0,remark: undefined,roleIds: []}this.resetForm(form)},/** 修改按钮操作 */handleUpdate(row) {this.reset()const id row.id || this.idsgetUser(id).then((response) {this.form response.userthis.roleOptions response.rolesthis.form.roleIds response.roleIdsthis.open truethis.title 修改用户})},/** 提交按钮 */submitForm: function() {this.$refs[form].validate((valid) {if (valid) {if (this.form.id ! undefined) {updateUser(this.form).then((response) {this.$modal.msgSuccess(修改成功)this.open false// ...})}}})}}
}3. 问题解决 使用上面代码无法解决el-select与el-option无法通过v-model实现数据双向绑定的问题因为在handleUpdate方法中this.form.roleIds的变化并没有Vue.js检测到需要通过this.$set来手动触发数据的变化检测。 /** 修改按钮操作 */
handleUpdate(row) {this.reset()const id row.id || this.idsgetUser(id).then((response) {this.form response.userthis.roleOptions response.rolesthis.$set(this.form, roleIds, response.roleIds)this.open truethis.title 修改用户})
},
