关于elementUI下拉选择的用法

今天在完成一个功能时，遇到了一些我认为值得记录一下的东西

一，任务

修改和增加操作，但是需要用到下拉列表（以修改为例）

二，困难

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>

大概就是这样（节省篇幅删掉了些）

最后效果就是下面这样：