vue element table 可编辑修改

[tiantingrui]

原理 ： 利用data数据每一项传一个 isEdit 属性来控制

<el-table
          :data="adjustObjectData"
          v-loading="adjustObjectLoading"
        >
          <el-table-column
            prop="name"
            label="姓名"
          >
            <template #default="scope">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.name"
                placeholder="输入姓名"
                clearable
              ></el-input>
              <span v-else>{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="nativeCode"
            label="电话区号"
          >
            <template #default="scope">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.nativeCode"
                placeholder="输入区号"
                clearable
              ></el-input>
              <span v-else>{{scope.row.nativeCode}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
          >
            <template #default="scope">
              <el-input
                v-if="scope.row.isEdit"
                v-model="scope.row.phone"
                placeholder="输入手机号"
                clearable
              ></el-input>
              <span v-else>{{scope.row.phone}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <span v-if="!scope.row.isEdit">
                <span
                  class="action-button primary-color"
                  @click="handleEditContact(scope.row)"
                >
                  编辑
                </span>
                <span
                  class="action-button primary-color"
                  @click="handleDelContact(scope.row)"
                >
                  删除
                </span>
              </span>
              <span v-else>
                <span
                  class="action-button primary-color"
                  @click="handleSaveContact(scope.row)"
                > 保存 </span>
                <span
                  class="action-button primary-color"
                  @click="handleCancelContact(scope.row)"
                > 取消 </span>
              </span>
            </template>
          </el-table-column>
        </el-table>

// edit contact
    handleEditContact(row) {
      row.isEdit = true
    },
    // save contact
    async handleSaveContact(row) {
      row.isEdit = false
}