vue+element-ui实现表格编辑

 动态生成表格模板

  <el-table max-height="400"
              :data="tableData"
              stripe
              style="width:100%;"
              class="tb-edit"
              @row-dblclick="row_dblclick">
      <el-table-column :width="dataArrHeader.length >=4?'200px':''"
                       :prop="el.prop"
                       :label="el.label"
                       align="left"
                       v-for="(el, ind) in dataArrHeader"
                       :key="ind"
                       show-overflow-tooltip>
        <template slot-scope="scope">
          <el-input size="mini"
                    v-model="scope.row[el.prop]"
                    placeholder="请输入内容"
                    v-if="scope.row.showEdit"></el-input>
          <span v-else>{{ scope.row[el.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column label=""
                       width="40">
        <template slot-scope="scope">
          <span class="el-icon-circle-close"
                @click="deleteData(scope.$index,scope.row)"
                v-if="scope.row.showEdit"></span>
        </template>
      </el-table-column>
  </el-table>

 getData () {
      // 获取预览数据
      let query = {
        dbName: this.authDataObj.dbName,
        dbUser: this.authDataObj.dbUser,
        tabCnName: this.authDataObj.tabCnName,
        tabName: this.authDataObj.tabName,
        type: this.authDataObj.type,
        id: this.authDataObj.id,
        createDate: this.authDataObj.createDate
      }
      this.$http.post(this.apiurl, query).then(res => {
        this.dataArrHeader = []
        const objT = res.object.data.fieldMeta[0] || {}
        // synchronize
        Object.keys(objT).forEach((it) => {
          if (objT[it]) {
            let objTs = {}
            objTs.prop = it
            objTs.label = objT[it]
            this.dataArrHeader.push(objTs)
          }
        })
       
        res.object.data.fieldMeta.map(v => {
          v.showEdit = false
        })
        this.tableData = res.object.data.fieldMeta
        this.tableData[this.tableData.length - 1].showEdit = true
        console.log(this.tableData)
      }).catch(err => {
        console.log(err)
      }).finally(() => {
        this.listLoading = false
      })
    },
 row_dblclick (row, event) {
      this.tableData.map(v => {
        if (row === v) {
          v.showEdit = true
        } else {
          v.showEdit = false
        }
      })
    },