element table组件实现可编辑的方法

我们在实际开发的过程中会遇到需要展示表格的需求，但表格不光需要回显，有时会需要向后台发送数据，怎么实现table组件可编辑，答案就是插槽。

 实现一个简单的，在其中加入下拉选择框，加入输入框，实现用户可以自填表格，这边用的是element组件

代码如下：

HTML

 <el-table
                          :data="item.tableData1"
                          border
                          :header-cell-style="{
                            background: '#f8fbff',
                            color: '#173686',
                            border: '0',
                          }"
                          style="width: 100%"
                        >
                          <el-table-column
                            label="名称"
                            align="center"
                            width="350"
                          >
                            <template slot-scope="scope">
                              <div class="noBor">
                                <el-input
                                  v-model="scope.row.paramName"
                                  placeholder="请输入"
                                ></el-input>
                              </div>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="是否必填"
                            align="center"
                            prop="mast"
                            width="225"
                          >
                            <template slot-scope="scope">
                              <el-select
                                v-model="scope.row.mast"
                                placeholder="请选择"
                              >
                                <el-option label="是" value="0"></el-option>
                                <el-option label="否" value="1"></el-option>
                              </el-select>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="说明"
                            align="center"
                            width="350"
                          >
                            <template slot-scope="scope">
                              <div class="noBor">
                                <el-input
                                  v-model="scope.row.state"
                                  placeholder="请输入"
                                ></el-input>
                              </div>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="类型"
                            align="center"
                            width="225"
                          >
                            <template slot-scope="scope">
                              <div class="noBor">
                                <el-input
                                  v-model="scope.row.type"
                                  placeholder="请输入"
                                ></el-input>
                              </div>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="备注"
                            align="center"
                            width="350"
                          >
                            <template slot-scope="scope">
                              <div class="noBor">
                                <el-input
                                  v-model="scope.row.remark"
                                  placeholder="请输入"
                                ></el-input>
                              </div>
                            </template>
                          </el-table-column>
                        </el-table>

header-cell-style是单独定义表格表头样式的方法

数据不要忘了定义：

            tableData1: [
              {
                paramName: "",
                mast: "",
                state: "",
                type: "",
                remark: "",
              },
            ],

其中input加了div是为了去掉边框，代码如下：

  .noBor {
    /deep/.el-input__inner {
      border: none;
    }
  }

当然，表格内如果是固定同一的样式，比如都需要他可输入，可以都放入input输入框，定义动态的表头，直接循环就可以

目前还没有发现如果使用动态表头，循环出来的怎么给每一项单独设置，（之前使用iview可以）

希望大佬们多多指正