el-select控制单选还是多选

在这里插入图片描述

 <el-form :inline="true" :model="form" class="demo-form-inline">
    <el-form-item>
      <el-select v-model="form.properties_id" placeholder="请选择样品性质" clearable :multiple="multiple_properties"  @change="getData()" @focus="focus_properties()" style="width: 300px">
        <el-option v-for="item in sample_properties" :label="item.label" :value="item.value" :key="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-select v-model="form.place_id" placeholder="请选择品名" clearable :multiple="multiple_place" @change="getData()" @focus="focus_place()" style="width: 300px">
        <el-option v-for="item in place_data" :label="item.label" :value="item.value" :key="item.value"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  form: {
    properties_id : [],
    place_id      : [],
  },
  multiple_properties: true,
  multiple_place: true,
 //properties 获得焦点
 focus_properties(){
   var that = this
   that.form.properties_id = [];
   if(that.form.place_id.length > 1){
     that.multiple_place = true;
     that.multiple_properties = false;
   }
   else{
     that.multiple_properties = true;
     //that.multiple_place = true;
   }
 },
 //place 获得焦点
 focus_place(){
   var that = this
   that.form.place_id = [];
   if(that.form.properties_id.length > 1){
     that.multiple_place = false;
     that.multiple_properties = true;
   }
   else{
     //that.multiple_properties = true;
      that.multiple_place = true;
   }
 },
 getData(){
    var that = this
    //样品性质
    var properties_id = [];
    var properties_id_len = that.form.properties_id.length;
    if(properties_id_len == undefined){
      //此时会变成字符串
      var str = that.form.properties_id
      properties_id= JSON.parse("[" + str + "]");//变成数组形式
    }
    else{
      properties_id = that.form.properties_id;
    }
    //品名
    var place_id = [];
    var place_id_len = that.form.place_id.length;
    if(place_id_len == undefined){
      //此时会变成字符串
      var str = that.form.place_id
      place_id= JSON.parse("[" + str + "]");//变成数组形式
    }
    else{
      place_id = that.form.place_id;
    }

    if(properties_id.length == 0){
      properties_id = null;
    }
    if(place_id.length == 0){
      place_id = null;
    }

    $.ajax({
      url: "/admin/report/getDevetimeData",
      type: "GET",
      data : {
        properties_id : properties_id,
        place_id      : place_id,
      },
      dataType:'json',
      success: function (res) {
        if (res.code == 100) {
          that.data = res.data;
        }
      }
    });
  },
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue+ElementUI中使用el-select组件进行单选多选时,可以通过设置v-model来绑定选中的值,并且根据el-select组件的multiple属性来决定是单选还是多选单选时,v-model绑定的是一个普通变量,当用户选择一个选项时,v-model变量会被更新为选中的值。例如: ``` <el-select v-model="selectedItem"> <el-option label="选项1" value="option1"></el-option> <el-option label="选项2" value="option2"></el-option> <el-option label="选项3" value="option3"></el-option> <el-option label="选项4" value="option4"></el-option> </el-select> ``` 其中,`selectedItem`是一个普通变量,用来保存选中的值。当用户选择一个选项时,`selectedItem`变量会自动更新。 多选时,v-model绑定的是一个数组,用来保存选中的值。例如: ``` <el-select v-model="selectedItems" multiple> <el-option label="选项1" value="option1"></el-option> <el-option label="选项2" value="option2"></el-option> <el-option label="选项3" value="option3"></el-option> <el-option label="选项4" value="option4"></el-option> </el-select> ``` 其中,`selectedItems`是一个数组,用来保存选中的值。当用户选择一个或多个选项时,`selectedItems`数组会自动更新。 要回显已选中的值,只需要将v-model绑定的变量或数组初始化为已选中的值即可。例如: 单选回显: ``` <template> <el-select v-model="selectedItem"> <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 { selectedItem: "option2", // 已选中的值 options: [ { label: "选项1", value: "option1" }, { label: "选项2", value: "option2" }, { label: "选项3", value: "option3" }, { label: "选项4", value: "option4" }, ], }; }, }; </script> ``` 多选回显: ``` <template> <el-select v-model="selectedItems" multiple> <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 { selectedItems: ["option2", "option4"], // 已选中的值 options: [ { label: "选项1", value: "option1" }, { label: "选项2", value: "option2" }, { label: "选项3", value: "option3" }, { label: "选项4", value: "option4" }, ], }; }, }; </script> ``` 在上面的例子中,`selectedItem`变量或`selectedItems`数组被初始化为已选中的值,因此在页面加载时,已选中的选项会被自动回显。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值