select下拉框一次选择多个数据属性

桃扇骨 2022-12-20 12:55 134阅读 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

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

![8b38ae9c37aed8e34d18b5b3686ad913.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
    }

![5e4833c5b4cbe560fe2a5f6a564fd157.gif][]

当select下拉框选择其中一个数据的时候，传到后端的参数  
![195ced5fffd4ace2f0c70f13bfaf45e1.png][]

当select下拉框选择其中多个数据的时候,传到后端的参数  
![a9d8ebafb516d4f61e0736597ec81b6d.png][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]

[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
[8b38ae9c37aed8e34d18b5b3686ad913.png]: /images/20221120/45a4766ba7134d0d9837819d203d918b.png
[5e4833c5b4cbe560fe2a5f6a564fd157.gif]: /images/20221120/6d095460627e4245a2cc70c59c8e0f6f.png
[195ced5fffd4ace2f0c70f13bfaf45e1.png]: /images/20221120/1d7522d25e674eaeaf57a314b4ce8313.png
[a9d8ebafb516d4f61e0736597ec81b6d.png]: /images/20221120/822ac6b6221a4b9db29d61909c9db5c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/842f401fc7af4f0e99360e2d2be803af.png