在开发过程中, 总会做到修改功能, 但是在修改回显的时候, 发现下拉框始终回显的是id而不是文本,下面看案例
正确回显格式应该是这样
而回显的确实这个值的id
原因是因为在给select复制的时候没有重新渲染;一开始我的编辑回显方法是这样
// 编辑回显edit() {// 通过选中id查询信息axios.get('/xxx/xxx/id', {params: {id: this.selectedRows[0].ID }}).then((reponse) => {// 然后直接赋值到表单上this.recordFrom = reponse.data.data[0]})// 打开表单页面this.editRecordDialog = true}
直接将查询的数据赋值到表单中, 只会赋值返回回来的值, 如果v-model绑定的值是id,则只会显示id,如果绑定的值是name,则只会显示name。所以,给表单赋值的时候需要重新渲染一下下拉框
给赋值之后下面增加了一个查询下拉框的方法
// 编辑回显edit() {// 通过选中id查询信息axios.get('/xxx/xxx/id', {params: {id: this.selectedRows[0].ID }}).then((reponse) => {// 然后直接赋值到表单上this.recordFrom = reponse.data.data[0]})// 重新查询下拉框方法this.getNumber2()// 打开表单页面this.editRecordDialog = true}
查询方法代码:
// 查询版本号到下拉框getNumber2() {axios.get('xxx/xxx/number', {params: {id: this.proNameSelect } }).then((reponse) => {var obj = reponse.data.datafor (var i = 0; i < obj.length; i++) {this.options5.push({value: obj[i].ID, label: obj[i].versionNumber })}})}
这里附上下拉框的代码:
<el-form-item label="版本号" prop="verID"><el-select class="select-type" v-model="recordFrom.verID" placeholder="请选择版本号"><el-option v-for="item in options5" :key="item.ID" :label="item.versionNumber" :value="item.ID"> </el-option></el-select></el-form-item>
重新渲染之后,就可以正常回显啦
