fix(demo): fix display problem of editable table with `apiSelect`

修复ApiSelect在可编辑表格中的显示问题

fix(demo): fix display problem of editable table with `apiSelect`
修复ApiSelect在可编辑表格中的显示问题
无木
1 parent 18567e13
Showing 2 changed files with 26 additions and 2 deletions
src/views/demo/table/EditCellTable.vue
src/views/demo/table/EditRowTable.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,
     },
@@ -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: [