今天在完成一个功能时,遇到了一些我认为值得记录一下的东西
一,任务
修改和增加操作,但是需要用到下拉列表(以修改为例)
二,困难
1,动态显示下拉列表
2,修改时回显原数据
3,将修改的数据提交到后端
三,解决
1,在<el-select>下的<el-option>标签中用vue进行遍历,label属性是我们看到的内容
2,在<el-select>中绑定(用v-model),注意绑定的名字要和后端查询的保持一致
3,做完上面的步骤提交到后端基本上就已经没什么问题了,并且提交到后端的数据是<el-option>的value属性的值
至于<el-option>的key属性好像并没有什么作用
四,上代码
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="佣金规则">
<el-select v-model="form.commId" class="m-2" placeholder="请选择佣金规则">
<el-option
v-for="item in commList"
:key="item.commId"
:label="item.commName"
:value="item.commId"
/>
</el-select>
</el-form-item>
</el-form>
大概就是这样(节省篇幅删掉了些)
最后效果就是下面这样: