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

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

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

资料相关

vue-element-admin

推荐指数：star:55k Github 地址：https://github.com/PanJiaChen/vue-element-admin Demo体验：https://panjiachen.github.io/vue-element-admin/#/dashboard

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

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

首先，看文档： https://element.eleme.cn/#/zh-CN/component/select

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

<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
}

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

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