el-table 可编辑

<script setup lang="ts">
import { onMounted, reactive } from "vue";
import { GetLatestOrder } from "/@/api/order-confirm";

let columns = reactive([
  { name: "id", title: "id", type: "text" },
  { name: "date", title: "日期", type: "text" },
  { name: "name", title: "名字", type: "text" },
  { name: "address", title: "地址", type: "text" }
]);

let tableData = [
  {
    id: 1,
    date: "2016-05-03",
    name: "Tom",
    address: "No. 101, Grove St, Los Angeles"
  },
  {
    id: 2,
    date: "2016-05-02",
    name: "Jerry",
    address: "No. 189, Jeeqi St, Los Angeles"
  },
  {
    id: 3,
    date: "2016-05-04",
    name: "Joy",
    address: "No. 001, Hoale St, Los Angeles"
  },
  {
    id: 4,
    date: "2016-05-01",
    name: "Amada",
    address: "No. 562, Qee St, Los Angeles"
  },
  {
    id: 5,
    date: "2016-05-08",
    name: "Gan",
    address: "No. 778, Afree St, Los Angeles"
  },
  {
    id: 6,
    date: "2016-05-06",
    name: "Petty",
    address: "No. 985, Hily St, Los Angeles"
  },
  {
    id: 7,
    date: "2016-05-07",
    name: "Mally",
    address: "No. 211, Seely St, Los Angeles"
  }
];

onMounted(() => {
  GetLatestOrder().then(data => {
    console.log(data);
  });
});

const handleSelectionChange = data => {
  if (data) {
    data.forEach((val, index) => {
      console.log(val.id);
    });
  }
};
const handleEdit = (index, row) => {
  console.log(index, row);
};
</script>

<template>
  <div>
    <el-table
      class="tb-edit"
      border
      stripe
      :data="tableData"
      style="width: 100%"
      :highlight-current-row="true"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" />
      <template v-for="(item, index) in columns" :key="index">
        <el-table-column
          :prop="item.name"
          :label="item.title"
          v-if="item.name !== 'id'"
        >
          <template v-slot="scope">
            <el-input
              v-if="item.type === 'text'"
              v-model="scope.row[item.name]"
              @change="handleEdit(scope.$index, scope.row)"
            />
            <span>{{ scope.row[item.name] }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<style scoped>
.tb-edit .el-input,
.tb-edit .el-select {
  display: none;
}

.tb-edit .current-row .el-input,
.tb-edit .current-row .el-select {
  display: block;
}

.tb-edit .current-row .el-input + span,
.tb-edit .current-row .el-select + span {
  display: none;
}
</style>