vue中实现多选的下拉多选框

本文转载于他处，原文链接为：https://jsbin.com/dozowaresu/edit?html,js,output因为自己在使用mpvue做多选的下拉列表，查了很多发现没有，然后就搜索vue中的多选下拉列表，遂发现了此篇。demo如下：<!DOCTYPE html><html><head><script src="https://...

尔嵘

10289人浏览 · 2019-09-12 14:36:56

尔嵘 · 2019-09-12 14:36:56 发布

本文转载于他处，原文链接为：https://jsbin.com/dozowaresu/edit?html,js,output

因为自己在使用mpvue做多选的下拉列表，查了很多发现没有，然后就搜索vue中的多选下拉列表，遂发现了此篇。demo如下：

<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-select@2.0.0/dist/vue-select.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="app" class="container-fluid">
    <h2>VueSelect Example</h2>
    <v-select :placeholder="placeholder" 
              multiple 
              :options="options"
              label="name"
              @input="selecte_student"
              :value.sync="student_obj"></v-select>
    <div id="value">{{students}}</div>  
  </div>
</body>
<script>
    Vue.component('v-select', VueSelect.VueSelect);

   new Vue({
      el: '#app',
      data: function() {
        return {
          options: [
            {"student_id": 1, "name": "Vence"},
            {"student_id": 2, "name": "Job"},
            {"student_id": 3, "name": "Jack"},
          ],
          placeholder: 'Choose a student..',
          students: [1],
          student_obj: []
        }
      },
     mounted: function() {
       var student_filter = function (obj) {
        return this.students.indexOf(obj.student_id) > -1
      }
       this.student_obj = this.options.filter(student_filter, this)
     },
     methods:{
       selecte_student: function(values){
         this.students =values.map(function(obj){
           return obj.student_id
         })
       }
     }
    });
</script>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^