vue实现表格里插入输入框，实现编辑操作，添加必填校验

背景

产品经理今天的需求里有一点是：表格里面需要加入输入框，对表格数据的某一个属性进行编辑，
一开始我是使用el-table，在里面直接加入el-input，但过程种发现了问题，输入框输入值没有反应，并没有双向绑定到属性上；

---

# 问题讲解 ##### 尝试但是失败了的写法是:

 <el-table :data="batchRowsDatas">
	<el-table-column
	  prop="bid_edit"
	  label="价格"
	  width="320"
	  align="center"
	>
	  <template slot-scope="scope">
	    <el-form :ref="`batch_bid${scope.row.index}`" :model="scope.row" class="batch-form">
	      <el-form-item :prop="`${scope.row.index}bid_edit`" :rules="batchBidRules" label="">
	        <el-input v-model="scope.row.bid_edit" placeholder="请输入" class="w120" @input="getNewNote()"></el-input>
	      </el-form-item>
	    </el-form>
	  </template>
	</el-table-column>
</el-table>

看见输入框有值输入，但是没有显示。

所以我换了一个思路，不使用el-table，自己手动实现table表格试试看；

 <div class="table mt24">
      <div class="table-content">
        <div class="headers">
          <div class="common back t-header">账户名称</div>
          <div class="common back t-header">账户备注</div>
          <div class="common back t-input">修改账户备注</div>
        </div>
        <div class="headers" v-for="(item, index) in accountList" :key="item.advertiser_id">
          <div class="common t-header">
            <span :title="item.advertiser_nick">
              {{ item.advertiser_nick }}
            </span>
          </div>
          <div class="common t-header">
            <span :title="item.note">
              {{ item.note }}
            </span>
          </div>
          <div class="t-input displays" :id="`mark${index}`">
            <el-input
              v-model="item.new_note"
              placeholder="请输入账户备注"
              class="note_input"
              @input="getNewNote($event, index)"
            >
            </el-input>
            <div class="error_msg"> // 错误校验
              {{ item.error_mess }}
            </div>
          </div>
        </div>
      </div>
    </div>
    method:{
		getNewNote(value, index) {
	      this.accountList[index].new_note = value;
	      this.checkIsOk(index);
	      this.$forceUpdate(); // 必须加上，强制更新视图
	    },
	}
	<style>
	
		.table {
		  max-height: 445px;
		  overflow: hidden;
		  overflow-y: auto;
		  border: 1px solid #e8eaec;
		  border-bottom: none;
		
		  .headers {
		    display: flex;
		  }
		
		  .common {
		    height: 55px;
		    padding: 0 8px;
		    overflow: hidden;
		    font-size: 12px;
		    line-height: 55px;
		    color: #333;
		    text-align: left;
		    text-overflow: ellipsis;
		    white-space: nowrap;
		    border-bottom: 1px solid #e8eaec;
		  }
		
		  .back {
		    background-color: #fafafa;
		  }
		
		  .t-header {
		    width: 250px;
		    border-right: 1px solid #e8eaec;
		  }
		
		  .t-input {
		    width: 426px;
		    border-bottom: 1px solid #e8eaec;
		  }
		
		  .error_msg {
		    padding-top: 0;
		    padding-left: 13px;
		    font-size: 12px;
		    line-height: 1;
		    color: #f56c6c;
		  }
		}
	</style>
	

自己手动实现了双向绑定，一山更比一山高，解决了双向绑定发现还有新的需求：需要对每个输入框进行校验。
开始的设计是每个输入框放在el-form下，作为单独的表单模块，结果发现虽然视图更新了，但是el-form的校验拿不到更新的值，没有绑定进去，所有又只能自己实现了。

添加字段 isValiad 来判定是否符合校验，errorMsg 存校验错误的信息，统一卸写在了方法里面：

checkIsOk(index) {
      let isValid = true;  
      let item = this.accountList[index];
      if (!item.new_note) {
        item.error_mess = "账户备注不允许为空";
        item.isError = true;
        isValid = false;
      } else if (this.$utils.getBytes(item.new_note) > 100) {
        item.error_mess = "账户备注长度不得超过100字符";
        item.isError = true;
        isValid = false;
      } else {
        item.isError = false;
        item.error_mess = "";
      }
      return isValid;
    },