el-select 多选_el-select多选

多选关键字multiple

HTML中的代码

<el-select multiple v-model="projBascInfoShow.projFlag" placeholder="请选择">
     <el-option v-for="item in xmbsList" :key="item.value" :label="item.label" :value="item.value">
     </el-option>
</el-select>
1
2
3
4

在js的页面加载的那个return{}中给整一个xmbsList[]

xmbsList: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

此处有个坑（关于赋值）

v-model="projBascInfoShow.projFlag" ，如果此功能是在弹出窗时，附初始值可能会找不到，建议采用单层
v-model="projFlag"

所以附初始值如下
HTML中的代码

<el-select multiple v-model="projFlag" placeholder="请选择">
     <el-option v-for="item in xmbsList" :key="item.value" :label="item.label" :value="item.value">
     </el-option>
</el-select>
1
2
3
4

JS

projFlag;[ '选项1'],
xmbsList: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

此处又来一个 坑

对于value的选值问题，如果只单纯的数字容易出错（容易一边是字符，另外一边识别成字符，无法统一），所以建议统一采用字符