双击编辑table表格

103 阅读1分钟

image.png

 <el-table-column property="purchaseQuantity" label="申购数量">
        <template slot-scope="scope">
          <div
            style="
              width: 100%;
              height: 50px;
              display: flex;
              align-items: center;
            "
            v-if="!scope.row.edit1"
            @dblclick="editRow1(scope.row)"
          >
            {{ scope.row.purchaseQuantity }}
          </div>
          <el-input
            v-else
            v-model="scope.row.purchaseQuantity"
            @blur="saveRow1(scope.row)"
          ></el-input>
        </template>
      </el-table-column>
      
      
         editRow1(row) {
          if (row.status == "新建") {
            row.edit1 = true;
          }
        },
        saveRow1(row) {
          row.edit1 = false;
          this.materialPurchaseOrderDetailUpdate({
            ...row,
          });
        },
        

在每条数据中添加一个edit1:false

       dataTypeItemList(id) {
          this.$api.dataTypeItemList(id).then((res) => {
            if (res && res.code == 0) {
              this.tableDataDetail = res.data.map((item) => {
                return {
                  ...item,
                  edit1: false,
                };
              });
            }
          });
        },