element_ui实现表格内套表单，点击可以编辑

<template>
  <div class="app-container">
    <el-table :data="list" stripe style="width: 100%" @cell-dblclick="openEditColumn">
      <el-table-column prop="cameraX" label="坐标位置:X">
        <template slot-scope="scope">
          <span v-show="!scope.row.xEdit">{{ scope.row.cameraX }}</span>
          <el-input @blur="editColumnData(scope.row, 'cameraX')"
                    @keyup.enter.native="editColumnData(scope.row, 'cameraX')" v-show="scope.row.xEdit"
                    size="mini" v-model="scope.row.cameraX"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="cameraY" label="坐标位置:Y">
        <template slot-scope="scope">
          <span v-show="!scope.row.yEdit">{{ scope.row.cameraY }}</span>
          <el-input @blur="editColumnData(scope.row, 'cameraY')"
                    @keyup.enter.native="editColumnData(scope.row, 'cameraY')" v-show="scope.row.yEdit"
                    size="mini" v-model="scope.row.cameraY"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="cameraZ" label="坐标位置:Z">
        <template slot-scope="scope">
          <span v-show="!scope.row.zEdit">{{ scope.row.cameraZ }}</span>
          <el-input @blur="editColumnData(scope.row, 'cameraZ')"
                    @keyup.enter.native="editColumnData(scope.row, 'cameraZ')" v-show="scope.row.zEdit"
                    size="mini" v-model="scope.row.cameraZ"></el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "handleViewCamera",
  components: {},
  props: {
  },
  data() {
    return {
      list: {},
    };
  },
  created() {
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取数据列表
    getList() {
      queryList(this.regionId).then((res) => {
        res.data.cameras.forEach(item => {
          item.xEdit = false;
          item.yEdit = false;
          item.zEdit = false;
          this.list.push(item)
        });
      });
    },
    // 打开信息编辑
    openEditColumn(row, column, cell, event) {
      if (column.property === "cameraX") {
        this.equipmentList.cameras.forEach(item => {
          if (item.id === row.id) {
            // 激活当前点击的单元格进入可以编辑（span与el-input标签显示隐藏切换）
            item.xEdit = true
          }
        });
      } else if (column.property === "cameraY") {
        this.equipmentList.cameras.forEach(item => {
          if (item.id === row.id) {
            item.yEdit = true
          }
        });
      } else if (column.property === "cameraZ") {
        this.equipmentList.cameras.forEach(item => {
          if (item.id === row.id) {
            item.zEdit = true
          }
        });
      }
    },
    // 表格数据编辑保存并关闭编辑
    editColumnData(row, column) {
      // 关闭表格编辑
      this.list.forEach(item => {
        if (item.id === row.id) {
          if (column === "cameraX") {
            item.xEdit = false;
          } else if (column === "cameraY") {
            item.yEdit = false;
          } else if (column === "cameraZ") {
            item.zEdit = false;
          }
        }
      });
    }
  },
};
但是表单大在小和表格不同，比较不自然，可以设样式来解决：以下为参考

在需要套表单输入框的表格列中，使用 scoped slot 的方式来渲染表格单元格。例如：
<template slot-scope="scope">
  <el-form>
    <el-form-item>
      <el-input :border="false" v-model="scope.row.data"></el-input>
    </el-form-item>
  </el-form>
</template>
<template slot-scope="scope">
  <el-form>
    <el-form-item>
      <el-input :border="false" v-model="scope.row.data"></el-input>
    </el-form-item>
  </el-form>
</template>
​
在 el-input 组件中添加 ​:border="false"​ 属性，来设置输入框无边框。

根据表格列的宽度，调整 el-form 和 el-input 的宽度，使其与表格列一致。例如：

<template slot-scope="scope">
  <el-form :style="{width: scope.col.width + 'px'}">
    <el-form-item :style="{marginBottom: '0'}">
      <el-input :border="false" v-model="scope.row.data" :style="{width: (scope.col.width - 20) + 'px'}"></el-input>
    </el-form-item>
  </el-form>
</template>
<template slot-scope="scope">
  <el-form :style="{width: scope.col.width + 'px'}">
    <el-form-item :style="{marginBottom: '0'}">
      <el-input :border="false" v-model="scope.row.data" :style="{width: (scope.col.width - 20) + 'px'}"></el-input>
    </el-form-item>
  </el-form>
</template>
​
在上述代码中，使用了 ​scope.col.width​ 来获取当前表格列的宽度，并根据表格列的宽度来设置 el-form 和 el-input 的宽度。其中，减去了 20 像素的宽度，是为了留出一定的空隙，使得输入框和表格列之间有一定的间距。

最后，将以上代码加入到 el-table-column 中，即可实现表格里面套表单输入框的效果。例如：
<el-table-column prop="data" label="数据">
  <template slot-scope="scope">
    <el-form :style="{width: scope.col.width + 'px'}">
      <el-form-item :style="{marginBottom: '0'}">
        <el-input :border="false" v-model="scope.row.data" :style="{width: (scope.col.width - 20) + 'px'}"></el-input>
      </el-form-item>
    </el-form>
  </template>
</el-table-column>
<el-table-column prop="data" label="数据">
  <template slot-scope="scope">
    <el-form :style="{width: scope.col.width + 'px'}">
      <el-form-item :style="{marginBottom: '0'}">
        <el-input :border="false" v-model="scope.row.data" :style="{width: (scope.col.width - 20) + 'px'}"></el-input>
      </el-form-item>
    </el-form>
  </template>
</el-table-column>
​
希望这可以帮助您完成 Element_ui 表格里面套表单输入框的功能。