el-select multi-select box use and echo default selection description

change point

<el-select add attribute multiple,

 v-model= bound must be an array, defined in data,

 When echoing, multiple selected ones can be displayed if there are values ​​in the array passed in the background.

              <el-row>
                <el-col :span="24">
                  <elian-table-form-item prop="orgRoles" label="用户角色类型">
                    <el-select
                      multiple
                      v-model="form.orgRoles"
                      placeholder="请选择">
                      <el-option
                        v-for="item in roleTypeDic"
                        :key="item.roleId"
                        :label="item.roleName"
                        :value="item.roleId"
                      >
                      </el-option>
                    </el-select>
                  </elian-table-form-item>
                </el-col>
              </el-row>


  data() {
    return {
      roleTypeDic: [
                    {roleId:'01',roleName:'经理'},
                    {roleId:'02',roleName:'销售'}
                    ], // 这边可以动态后台查询
      form: {
        orgRoles:[],  // 这个里面是roleId 数组，后台获取到list后页面会直接显示
      },

    };
  },

Backstage

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

If you encounter problems, it is recommended to read more articles on the official website of element . There are cases in the drop-down box for single selection, multi-selection, and input retrieval.

Learning source:  el-select multi-select box use and echo default selection instructions_el-select multi-select echo_AXC's Blog-CSDN Blog

Official documentation:  Element - The world's most popular Vue UI framework