当前位置:   article > 正文

el-select 多选框使用 以及回显默认选中说明_elselect多选回显

elselect多选回显

改动点

<el-select 添加属性  multiple,

 v-model=  绑定的必须是个数组,在data中定义好,

 回显的时候,后台传递数组有值就能显示多个选中的。

  1. <el-row>
  2. <el-col :span="24">
  3. <elian-table-form-item prop="orgRoles" label="用户角色类型">
  4. <el-select
  5. multiple
  6. v-model="form.orgRoles"
  7. placeholder="请选择">
  8. <el-option
  9. v-for="item in roleTypeDic"
  10. :key="item.roleId"
  11. :label="item.roleName"
  12. :value="item.roleId"
  13. >
  14. </el-option>
  15. </el-select>
  16. </elian-table-form-item>
  17. </el-col>
  18. </el-row>
  19. data() {
  20. return {
  21. roleTypeDic: [
  22. {roleId:'01',roleName:'经理'},
  23. {roleId:'02',roleName:'销售'}
  24. ], // 这边可以动态后台查询
  25. form: {
  26. orgRoles:[], // 这个里面是roleId 数组,后台获取到list后页面会直接显示
  27. },
  28. };
  29. },

后台

  1. // 后台list 有值页面就会显示已选中的
  2. List<String>orgRoles = ArrayList();
  3. orgRoles.add("01");
  4. orgRoles.add("02");

遇到问题建议多看element官网文章,下拉框单选、多选、输入检索都有案例

学习来源: el-select 多选框使用 以及回显默认选中说明_el-select多选回显_A.X.C的博客-CSDN博客

官方文档: Element - The world's most popular Vue UI framework 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/107279
推荐阅读