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;
    }

 <div class="col-sm-12 k_change_inp" style="overflow :auto;text-align: center;height:240px;width:550px; margin-left:50px;border:2px solid #5faee3">
     <p style="font-size: medium;margin:11px 0">
              支持退货原因设置
          </p>
      <el-table
          ref="multipleTable"
          :data="condition"
          tooltip-effect="dark"
          style="width: 95%;margin-left: 20px;"
          @select="handleSelect">
          <el-table-column
          :selectable="selectable"
          type="selection"
          width="55">
          </el-table-column>
          <el-table-column
          width="310"
          >
              <template scope="scope">
                  <el-input style="width:300px !important" v-model="scope.row.settingValue"></el-input>
              </template>
          </el-table-column>
          <el-table-column
          width="120"
          >
              <template scope="scope">
                  <i title="添加" @click="addCondition" class="i-icon el-icon-plus"></i>
                  <i title="删除" v-if="scope.$index == 0 ? false : true" @click="removeCondition(scope.$index,scope.row)" class="i-icon el-icon-close"  style="margin-left:10px"></i>
                  <i :title="scope.row.id ? '修改' : '提交'" @click="submitCondition(scope.row)" style="cursor: pointer;font-size: 20px;margin-left: 10px;line-height: 24px;" class="el-icon-circle-check"></i>
              </template>
          </el-table-column>
      </el-table>
  </div>

  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;
                    }          
            },