ElementUI表格中修改的小案例

话不多说上代码

<MouduleTable :tableData="tableData" height="30vh">
            <el-table-column label="沟通日期" prop="interview_time">
              <template slot-scope="{ row }">
                <el-date-picker
                  v-if="row.edit"
                  v-model="row.interview_time"
                  type="date"
                  value-format="yyyy-MM-dd"
                  prefix-icon="el-icon-date"
                  placeholder="选择日期时间"
                />
                <span v-else>{{ row.interview_time }}</span>
              </template>
            </el-table-column>
            <el-table-column label="下次回访日期" prop="next_time">
              <template slot-scope="{ row }">
                <el-date-picker
                  v-if="row.edit"
                  v-model="row.next_time"
                  type="date"
                  value-format="yyyy-MM-dd"
                  prefix-icon="el-icon-date"
                  placeholder="选择日期时间"
                />
                <span v-else>{{ row.next_time }}</span>
              </template>
            </el-table-column>
            <el-table-column label="学员意向状态" prop="status">
              <template slot-scope="{ row }">
                <el-select v-if="row.edit" v-model="row.status">
                  <el-option
                    v-for="(item, index) in intentionList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <span v-else>{{
                  ["", "待跟踪", "正在跟踪", "跟踪完成"][row.status]
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="沟通内容" prop="content">
              <template slot-scope="{ row }">
                <el-input v-if="row.edit" v-model="row.content" />
                <span v-else>{{ row.content }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="170" fixed="right">
              <template slot-scope="{ row }">
                <el-button
                  v-if="row.edit"
                  type="success"
                  @click="handleEdit(row)"
                >
                  确定
                </el-button>
                <el-button
                  class="mr20"
                  v-else
                  type="text"
                  @click="row.edit = !row.edit"
                >
                  修改
                </el-button>
                <el-popconfirm title="确定删除吗？" @confirm="removeBtn(row)">
                  <el-button slot="reference" type="text" class="colorDelete"
                    >删除</el-button
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
          </MouduleTable>

getData(page, pageSize, params) {
      this.$http
        .get(api, {
          params: { ...params },
        })
        .then((res) => {
          this.tableData = res.data.list;
          this.tableData = this.tableData.map((v) => {
            this.$set(v, "edit", false);
            return v;
          });
        });
    },