elementui中的table组件单元格可以输入

其实利用插槽可以解决 点击编辑的时候 elementui组件中的 table里单元格可以输入 并且获取一行的数据

 <el-table
          :header-cell-style="{
            'text-align': 'center',

            background: '#FAFAFA',
            'font-weight': '400',
          }"
          :cell-style="{
            'text-align': 'center',

            'margin-bottom': '0',
          }"
          :data="tableDatas"
          border
          style="margin-top: 10px"
        >
          <el-table-column label="xxx">
            <template scope="scope">
              <el-form :model="scope.row">
                <el-form-item size="mini">
                  <el-input
                    v-if="scope.row.isOK"
                    v-model="scope.row.test"
                    style="width: 50%; hight: 100%; margin: auto"
                  ></el-input>
                  <span v-else>{{ scope.row.test }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="xxx">
            <template scope="scope">
              <el-form :model="scope.row">
                <el-form-item size="mini">
                  <el-input
                    v-if="scope.row.isOK"
                    v-model="scope.row.safe"
                    style="width: 50%; hight: 100%; margin: auto"
                  ></el-input>
                  <span v-else>{{ scope.row.safe }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template scope="scope">
              <span
                @click="handleEdit(scope.$index, scope.row)"
                class="all-price-handle"
                >编辑</span
              >
              <span
                @click="handleDelete(scope.$index, scope.row)"
                class="all-price-handle"
                >删除</span
              >
            </template>
          </el-table-column>
        </el-table>

  data() {
    return {
      tableDatas: [
        {
          isOK: false,
        },
      ],
    }
  }

  methods: {
    handleEdit(index, row) {
      row.isOK = !row.isOK;
      //在这里进行根据需求逻辑修改
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }