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>

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


xmbsList: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],

此处有个坑(关于赋值)

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>

JS

projFlag;[ '选项1'],
xmbsList: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],

此处又来一个

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

你可能感兴趣的:(js,Web)