element-ui中将checkbox与input框进行关联

刚开始网上搜了很多,一直没看到满意的东西,后来自己就结合element-ui现有的东西写了一个,方便以后参考
具体效果如下:

现在的逻辑就是输入框输入条件,+可以添加数据行,√(如果第一次是添加,第二次就是修改),前面的勾选是选择创建的条件拿到当前一条的数据,然后给其他地方用,如果是没有提交过的数据不允许勾选,所有要禁用勾选

//这几个是覆盖element-ui原来的样式
 thead{
         display: none;
     }
     .el-table {
         border: 0;
     }
     .el-table::before {
        background-color:white;    
     }
     .el-table::after {
        background-color:white;     
    }
    .el-table .cell {
        text-align: left;
    }

 

     

              支持退货原因设置
          
      
          
          
          
              
          
          
              
          
      
  

  data() {

            return {
                condition: [{
                    settingValue: '',
                }],
            }
        },
        created () {
            this._getconditionList();
        },
        methods: {
            _getconditionList() {    //获取条件列表
                Model.getConditionList({}).then(res => {
                    this.condition = res.data;
                    this.toggleSelection(res.data);  //将以前勾选过的在得到数据的时候进行勾选
                })
            },
            handleSelect(selection, row) {                     
                if(row.id) {                 //这里根据id来判断是否是勾选
                    var params = {
                        id:row.id,
                        settingType:""
                    }
                    if(row.settingType == "N") {
                        params.settingType = "Y";
                    }else {
                        params.settingType = "N"
                    } 
                    this.editSettingType(params);       //改变状态方法           
                }                           
            },
     
            submitCondition(row) {   //提交
                if(row.id) {
                    var params = {
                        id: row.id,
                        settingValue: row.settingValue
                    }
                    this.editSettingValue(params);    //修改
                }else {
                    if(row.settingValue.trim() != '') {
                        Model.addCondition(row).then(res => {    //添加
                            if(res.callStatus == "SUCCESS") {
                                this.$message({
                                    type: "success",
                                    message: "内容添加成功"
                                })
                            } 
                            setTimeout(() => {
                                location.reload() 
                            },1000)   
                        })
                    }else {
                        this.$message({
                            type: "error",
                            message: "请输入添加内容"
                        })
                        return;
                    }
                }               
            },
                         
            addCondition() {     页面的+
            this.condition.push({});
            },

            removeCondition(index,row) {   删除
                if(row.id) {
                    this.condition.splice(index, 1);
                    Model.deleteCondition({id:row.id}).then(res => {   //删除已添加的数据
                        if(res.callStatus == "SUCCESS") {
                            this.$message({
                                type: "success",
                                message: "删除成功"
                            })
                        }                  
                    }) 
                }else {
                    this.condition.splice(index, 1)    //仅删除刚创建的一行(没有提交过的)
                }  
            },

            // 修改选中状态
              editSettingType(params) {
                Model.editCondition(params).then(res => {
                    if(res.callStatus == "SUCCESS") {
                        this.$message({
                            type: "success",
                            message: "状态修改成功"
                        })
                    }
                }) 
              },
            // 修改内容
            editSettingValue(params) {
                Model.editCondition(params).then(res => {
                    if(res.callStatus == "SUCCESS") {
                        this.$message({
                            type: "success",
                            message: "内容修改成功"
                        })
                    }
                })
            },

            toggleSelection(rows) {  
            if (rows) {
                this.$nextTick(() => {                 
                    rows.forEach(res => {
                        if(res.settingType == "Y") {
                            this.$refs.multipleTable.toggleRowSelection(res, true);
                        }
                    });                                              
                })
            } else {
                this.$refs.multipleTable.clearSelection();
            }
            },

            selectable(row) { //禁用选框
                    if(!row.id) {           
                        return false;
                    }else {
                        return true;
                    }          
            },