项目实现|el-table中新增一个可编辑的列，并且传递数据

2.在el-table中新增一列

2.1 需求

在el-table中新增一列，并且新增的这列是input类型，input可以输入，且是必填的，可以看一下实现的效果

2.2 思路

一开始其实并不知道怎么做，因为感觉很复杂的样子，尝试了很多版本

只使用el-table-column

但是使用el-table-column会发现无法实现校验

    <el-table-column prop="testLabel" label="testLabel">
      <template slot-scope="scope">
        <el-input
          v-model.number="scope.row.testLabel"
        ></el-input>
      </template>
    </el-table-column>

使用el-form-item实现校验

因为el-form-item是可以实现校验的,可以利用prop的动态绑定方式给el-table里的某一列加在一个校验

```
        <el-table-column prop="testLabel" label="testLabel">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.testLabel'"
              required
            >
              <el-input
                v-model.number="scope.row.testLabel"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
```

但是使用默认的规则会出现提示比较难看的情景

所以可以使用el-form-item的自定义规则实现

因为el-form本身是可以定义rules，只要保证prop和rules的对象一致即可，但是当prop是动态的时候，就只能单独的定义规则了

    <el-table-column prop="testLabel" label="testLabel">
      <template slot-scope="scope">
        <el-form-item
          :prop="'tableData.' + scope.$index + '.testLabel'"
          required
          :rules="tableRules"
        >
          <el-input
            v-model.number="scope.row.testLabel"
          ></el-input>
        </el-form-item>
      </template>
    </el-table-column>

心路路程：

太着急了，晚上搞到很晚也没有想通
结果在回去的出租车上，我还是在想这个问题，最后发现，其实是很好解决的，想要table中的数据被校验，就需要table和form有关系，那么最简单的就是table绑定的是form中的数据，这样form就会可控table，包括table中的某个字段
最后写出来的时候，发现其实是一个很简单的问题
最后总结了el-form和el-form-item校验规则时的一些规律

      tableRules: {  // table中增加el-form-item的校验
       required: true,message: 'it cannot be empty', trigger: 'blur'
      },
      formRules: {  // form的检验
        homeworkName: [
          { required: true, message: 'it cannot be empty', trigger: 'blur' }
        ]
      },
      itemRules: [{ // form-item的校验
        required: true,message: 'it cannot be empty',trigger: 'blur'
      }],

翻看了el-form和el-form-item的源码，发现el-form的rules支持Object，el-form-item支持Object和Array两种方式

test=5.png

最后一个完美的校验就完成了

3. 构造数组对象传给后端

3.1需求

{
    "homeworkName": "加拿大",
    "inputTestLabelList": {   //新增
        "testLabelList": [
            {
                "ID": 100,
                "testLabel": 111
            },
            {
                "ID": 200,
                "testLabel": 222
            },
            {
                "ID": 300,
                "testLabel": 333
            }
        ]
    },
    "date": "2016-05-03",
    "name": "王小虎",
    "address": "上海市普陀区金沙江路 1516 弄"
}

这个需求是基于刚才的这页面的，table的前几列是只负责展示的，最后一列数据，点击保存的时候，将数据构造成如上的模式进行传递

其中ID是table自带的，但是testLabel是输入的

3.2 思路

使用@change方法，先获取整行的数据，这个时候，每一行的ID和testLabel都是可以拿到的，然后构造成一个对象，此时就需要每次change的时候，将对象push进入一个数组

    handleCellEdit(v) {
      const obj = {}
      const { ID, testLabel } = v
      obj.ID = ID
      obj.testLabel = testLabel
      this.testLabelList.push(obj)
    },

接下来就是保存的时候，保存的时候，将数组添加到data中

    saveData() {
      let data = null
      data = {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }
      this.$refs.tableForm.validate((valid) => {
        if (valid) {
          data.inputTestLabelList = {
            testLabelList: this.testLabelList
        } else {
          return false
        }
      })
    },