按以下步骤实现多选框功能:1.在<el-form>标配中页面增加

<el-form>

    <el-form-item label="设备" prop="equipment">
      <template>
          <el-checkbox-group  v-model="zz" format="changeStyle">
            <el-checkbox
              v-for="item in hardwareListData"
              :key="item.id"
              :label="item.id"
            @change=" handleChange($event,item.id)">{{item.name}}</el-checkbox>
          </el-checkbox-group>
      </template>
    </el-form-item>
    
</el-form>


2.多选框用到的相关值准备

export default {
  name: "Room",
  data() {
    return {      
      hardwareListData:[],//后台返回的多选项
      checkedData: [],//选择多选框时的选中值
      zz:[0],//v_model取此值,没有默认0值使回显报错
      }
  }
}


3.相关方法

created() {
    getHardwareListData();
},

methods: {
    //获取会议室硬件
    getHardwareListData(){
        //具体方法不写了,就是从后台获取多选的选项,给this.hardwareListData赋值
        this.hardwareListData =  response.data;
    },
    
    //实时获取选中的选项id,注意此方法中e参数的传入
    handleChange:function(e,id) {
      if(e){
        this.checkedData.push(id);
      }else{
        this.delete(id);
      }
      console.log(this.checkedData);
    },
    
    //删除选中项
    delete(id){
        var index = this.checkedData.findIndex(item => {
          if ( item == id) {
          return true;
        }
      });
        this.checkedData.splice(index,1)
    },


    
4.新增记录的方法中设置this.zz = [0];
    例如:
    

add() {//此方法仅关键代码(将以下代码放入自己的新增方法中)
      this.zz = [0];//注意此处初始zz参数

      this.checkedData=[];//注意此处初始checkedData参数
      this.open = true;
      this.title = "添加会议室";
    },


5.修改记录时回显多选项    
  

 update(){//此方法仅关键代码(将以下代码放入自己的修改方法中)
        this.form = response.data;//注意response,所以此处方法应放到返回值处理的回调方法中
        this.zz = this.transStrToArr(this.form.equipment);//equipment存入的是设备id字符串已逗号分隔"1,2,4"
        for(var i=0;i<this.zz.length;i++){
          this.zz[i] = parseInt(this.zz[i]);
        }
        this.checkedData = this.zz;
        console.log(this.zz);
        //this.open = true;
        //this.title = "修改会议室";
    }
    // 字符串转数组 前台展示
    transStrToArr(str) {
      var arr = str.split(",");
      return arr;
    },


6.提交后台数据
 

submitForm: function() {
        this.form.equipment = this.transArrToString(this.checkedData);//在提交前将多选项的值赋值给form表单对应字段
        add(this.form).then(//此处返回值回调处理省略)
    },
    // 数组状字符串 给后台
    transArrToString(arr) {
      if (!Array.isArray(arr)) return false;
      var str = "";
      for (var i = 0, len = arr.length; i < len; i++) {
        i == 0 ? (str = arr[i]) : (str += "," + arr[i]);
      }
      return str;
    },    
}

哈哈哈,到此大功告成。。。

修改回显效果图(数据存的是设备id字符串,在sql中转的文字,先实现显示id串(如:“2,3,4”)没有错,后期博文说如何转文字)

Logo

前往低代码交流专区

更多推荐