From 535bdddf91785e20295c18cf80c8a22cc2172681 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= <netfan@foxmail.com>
Date: Mon, 19 Jul 2021 00:51:02 +0800
Subject: [PATCH] fix(demo): fix display problem of editable table with
 `apiSelect`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复ApiSelect在可编辑表格中的显示问题
---
 src/views/demo/table/EditCellTable.vue | 14 +++++++++++++-
 src/views/demo/table/EditRowTable.vue  | 14 +++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/views/demo/table/EditCellTable.vue b/src/views/demo/table/EditCellTable.vue
index 2cd3b1fe..0be5bf8c 100644
--- a/src/views/demo/table/EditCellTable.vue
+++ b/src/views/demo/table/EditCellTable.vue
@@ -8,11 +8,12 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, ref } from 'vue';
   import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
   import { optionsListApi } from '/@/api/demo/select';
 
   import { demoListApi } from '/@/api/demo/table';
+  const optionsData = ref([]);
   const columns: BasicColumn[] = [
     {
       title: '输入框',
@@ -87,6 +88,17 @@
         resultField: 'list',
         labelField: 'name',
         valueField: 'id',
+        onOptionsChange(options) {
+          optionsData.value = options;
+        },
+      },
+      editValueMap(value: any) {
+        const found = optionsData.value.find((option) => option.id === value);
+        if (found) {
+          return found.name;
+        } else {
+          return value;
+        }
       },
       width: 200,
     },
diff --git a/src/views/demo/table/EditRowTable.vue b/src/views/demo/table/EditRowTable.vue
index 371bd981..b939b516 100644
--- a/src/views/demo/table/EditRowTable.vue
+++ b/src/views/demo/table/EditRowTable.vue
@@ -20,6 +20,8 @@
   import { optionsListApi } from '/@/api/demo/select';
 
   import { demoListApi } from '/@/api/demo/table';
+  const optionsData = ref([]);
+
   const columns: BasicColumn[] = [
     {
       title: '输入框',
@@ -98,6 +100,17 @@
         resultField: 'list',
         labelField: 'name',
         valueField: 'id',
+        onOptionsChange(options) {
+          optionsData.value = options;
+        },
+      },
+      editValueMap(value: any) {
+        const found = optionsData.value.find((option) => option.id === value);
+        if (found) {
+          return found.name;
+        } else {
+          return value;
+        }
       },
       width: 200,
     },
@@ -149,7 +162,6 @@
     components: { BasicTable, TableAction },
     setup() {
       const currentEditKeyRef = ref('');
-
       const [registerTable] = useTable({
         title: '可编辑行示例',
         titleHelpMessage: [