vue的select下拉框多选项-multiple属性

客官°小女子只卖身不卖艺 2022-12-03 01:38 195阅读 0赞

最近在使用vue-element-admin这个后台管理框架开源模板在做一个管理后台，使用起来其实还挺方便的，大部分的组件源码里面都已经写好了，用的时候只需要把源码拿出来修改修改，也就成了。

这里记录一下开发过程中遇到的一些功能。

--------------------

资料相关

vue-element-admin

推荐指数：star:55k  
Github 地址：[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]  
Demo体验：[https://panjiachen.github.io/vue-element-admin/\#/dashboard][https_panjiachen.github.io_vue-element-admin_dashboard]

--------------------

今天记录一个select下拉框单选或者多选项，支持删除的功能  
其实很简单的，需要添加一个属性

为el-select设置multiple属性即可启用多选

首先，看文档：  
[https://element.eleme.cn/\#/zh-CN/component/select][https_element.eleme.cn_zh-CN_component_select]

饿了么这个框架的文档给的十分的全面，  
组件是非常的丰富的

![format_png][]

<template>
      <el-select v-model="value1" multiple placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    
      <el-select
        v-model="value2"
        multiple
        collapse-tags
        style="margin-left: 20px;"
        placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </template>
    
    <script>
      export default {
        data() {
          return {
            options: [{
              value: '选项1',
              label: '黄金糕'
            }, {
              value: '选项2',
              label: '双皮奶'
            }, {
              value: '选项3',
              label: '蚵仔煎'
            }, {
              value: '选项4',
              label: '龙须面'
            }, {
              value: '选项5',
              label: '北京烤鸭'
            }],
            value1: [],
            value2: []
          }
        }
      }
    </script>

实际应用的demo，参考代码index.vue

<template>
      <div class="tab-container">
        <el-form
          ref="dataForm"
          label-position="left"
          label-width="90px"
          style="width: 400px; margin-left:50px;"
        >
          <el-form-item label="题目">
            <el-input type="textarea" :rows="2" v-model="nextProjectForm.questionContent"></el-input>
          </el-form-item>
          <el-form-item label="正确答案" prop="correctAnswer">
            <el-input v-model="nextProjectForm.correctAnswer" />
          </el-form-item>
          <el-form-item label="其他答案1" prop="otherAnswer1">
            <el-input v-model="nextProjectForm.otherAnswer1" />
          </el-form-item>
          <el-form-item label="其他答案2" prop="otherAnswer2">
            <el-input v-model="nextProjectForm.otherAnswer2" />
          </el-form-item>
          <el-form-item label="其他答案3" prop="otherAnswer3">
            <el-input v-model="nextProjectForm.otherAnswer3" />
          </el-form-item>
          <el-form-item label="所属年级">
            <el-select
              v-model="nextProjectForm.userGrades"
              class="filter-item"
              placeholder="选择年级"
              multiple
              style="width: 311px; "
            >
              <el-option
                v-for="item in tabMapOptions"
                :key="item.key"
                :label="item.label"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
         
          <el-button type="primary" @click="createData()">确定</el-button>
        </div>
      </div>
    </template>
    <script>
    //调用接口
    import { saveSubject } from "@/api/content";
    export default {
      data() {
        return {
          gradeSelect: "",
          tabMapOptions: [
            { label: "幼儿园", key: "kinderGarten" },
            { label: "一年级", key: "firstGrade" },
            { label: "二年级", key: "twoGrade" },
            { label: "三年级", key: "threeGrade" },
            { label: "四年级", key: "fourGrade" },
            { label: "五年级", key: "fiveGrade" },
            { label: "六年级", key: "sixGrade" },
          ],
          nextProjectForm: {
            questionContent: "",
            correctAnswer: "",
            otherAnswer1: "",
            otherAnswer2: "",
            otherAnswer3: "",
            userGrades: [],
            questionCategory: "",
          },
        };
      },
      methods: {
        //添加增加题目
        async createData() {
          let form = null;
          form = this.nextProjectForm;
          const params = form;
          const res = await saveSubject(params);
          console.log(res);
          if (res.code === "0000") {
            this.$message({
              type: "info",
              message: "保存成功",
            });
            return;
          }
          this.$message({
            type: "error",
            message: "保存失败",
          });
        },
      },
    };
    </script>
    
    <style scoped>
    .tab-container {
      margin: 30px;
    }
    </style>

api

import request from '@/utils/request'
    
    //保存题目分类接口
    export async function saveSubjectCategory(data) {
      const res = await request({
        url: '/question/saveQuestionCategory',
        method: 'post',
        data
      })
      return res
    }

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LWQyN2Q0YzU1NmZkMGRhYmIuZ2lm][]

当select下拉框选择其中一个数据的时候，传到后端的参数

![format_png 1][]

当select下拉框选择其中多个数据的时候,传到后端的参数

![format_png 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTM4MDEy_size_16_color_FFFFFF_t_70][]

[https_github.com_PanJiaChen_vue-element-admin]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FPanJiaChen%2Fvue-element-admin
[https_panjiachen.github.io_vue-element-admin_dashboard]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin%2F%23%2Fdashboard
[https_element.eleme.cn_zh-CN_component_select]: https://links.jianshu.com/go?to=https%3A%2F%2Felement.eleme.cn%2F%23%2Fzh-CN%2Fcomponent%2Fselect
[format_png]: /images/20221123/109d91c238a64860bd15f2c1132de10f.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LWQyN2Q0YzU1NmZkMGRhYmIuZ2lm]: /images/20221123/f84856f566b14ff98c9d78b05270c06a.png
[format_png 1]: /images/20221123/0bd06537f1e943aca51a9f51cd82a093.png
[format_png 2]: /images/20221123/aaaa04acf458452780acc16827c0edb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTM4MDEy_size_16_color_FFFFFF_t_70]: /images/20221123/ce2ad3aae5f24fd496b21a290e451a7e.png