element-ui el-check多选框

//table中:车组标签


 	
        
    **
    
	
        
    

//from中


      
        
          
            {{operate.value}}
          
        
      
      
    

//js:

export default {
	 filters: {
		 //在table中回显的车组标签
		 getTagList(tags, tagListType) {
		      if (tags === null || tags === "") {
		        return "--";
		      } else {
		        var tagStr=''
		        for (var i = 0; i < tagListType.length; i++) {
		          for(var j=0;j {
	        this.$refs["dataForm"].clearValidate()
	      })
	    },
	    //新建时
	    handleCreate() {
	      this.$nextTick(() => {
	        this.$refs["dataForm"].clearValidate();
	      })
	    },
	    //更新:点击提交
	    updateData() {
     	 this.$refs["dataForm"].validate(valid => {
        	if (valid) {
          const tempData = Object.assign({}, this.temp)
          **tempData.tagList = this.checkOne**
          const tempDatas = JSON.stringify(tempData)
	          carModelUpdate(tempDatas).then(() => {
	            for (const v of this.list) {
		              if (v.id === this.temp.id) {
		                const index = this.list.indexOf(v)
		                this.list.splice(index, 1, this.temp)
		                break;
		              }
	            }
	            this.dialogFormVisible = false;
	            this.$notify({
	              title: "成功",
	              message: "更新成功",
	              type: "success",
	              duration: 2000
	            })
	            this.fetchData()
	          })
	        }
      	  })
    	},
    	//新建:点击提交
	    createData() {
	      this.$refs["dataForm"].validate(valid => {
	        if (valid) {
	          const tempData = Object.assign({}, this.temp);
	          tempData.tagList = this.checkOne;
	          const tempDatas = JSON.stringify(tempData);
	          carModelUpdate(tempDatas).then(() => {
	            for (const v of this.list) {
	              if (v.id === null) {
	                const index = this.list.indexOf(v);
	                this.list.splice(index, 1, this.temp);
	                break;
	              }
	            }
	            this.dialogFormVisible = false;
	            this.$notify({
	              title: "成功",
	              message: "新建成功",
	              type: "success",
	              duration: 2000
	            });
	            this.fetchData();
	          })
	        }
	      })
	    }
	    
	}
}

//后台:

List tagListType = new ArrayList<>();
        OptionBean optionBean = new OptionBean();
        optionBean.setId("0");
        optionBean.setValue("油电混合");
        tagListType.add(optionBean);
        optionBean = new OptionBean();
        optionBean.setId("1");
        optionBean.setValue("汽油车");
        tagListType.add(optionBean);
        optionBean = new OptionBean();
        optionBean.setId("2");
        optionBean.setValue("纯电动");
        tagListType.add(optionBean);
        map.put("tagListType", tagListType);

结果:
在这里插入图片描述
element-ui el-check多选框_第1张图片

你可能感兴趣的:(vue)