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="物料合计(元)">
            <template scope="scope">
              <el-form :model="scope.row">
                <el-form-item size="mini">
                  <span>{{ scope.row.material }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="工序合计(元)">
            <template scope="scope">
              <el-form :model="scope.row">
                <el-form-item size="mini">
                  <span>{{ scope.row.process }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="其他合计(元)">
            <template scope="scope">
              <el-form :model="scope.row">
                <el-form-item size="mini">
                  <span>{{ scope.row.other }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="测试标准(元)">
            <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="安全技术要求(元)">
            <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">
              <el-form :model="scope.row">
                <el-form-item size="mini">
                  <el-input
                    v-if="scope.row.isOK"
                    v-model="scope.row.profit"
                    style="width: 50%; hight: 100%; margin: auto"
                  ></el-input>
                  <span v-else>{{ scope.row.profit }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="增值税(%)">
            <template scope="scope">
              <el-form :model="scope.row">
                <el-form-item size="mini">
                  <el-input
                    v-if="scope.row.isOK"
                    v-model="scope.row.added"
                    style="width: 50%; hight: 100%; margin: auto"
                  ></el-input>
                  <span v-else>{{ scope.row.added }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="总成本合计(元)">
            <template scope="scope">
              <el-form :model="scope.row">
                <el-form-item size="mini">
                  <span>{{ scope.row.cost }}</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,
          material: "12.00",
          process: "23.00",
          other: "23.00",
          test: "sf",
          safe: "wer",
          profit: "3.73",
          added: "2343.73",
          cost: "2343.73",
        },
      ],
    }
  }

  methods: {
    handleEdit(index, row) {
      row.isOK = !row.isOK;
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }

• 复制代码既可实现