canrd-outside / order-erp-front · Commits

Commit 535bdddf91785e20295c18cf80c8a22cc2172681

Authored by 无木
1 parent 18567e13

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

修复ApiSelect在可编辑表格中的显示问题
Inline Side-by-side
Showing 2 changed files with 26 additions and 2 deletions
src/views/demo/table/EditCellTable.vue
  View file @535bddd
... ... @@ -8,11 +8,12 @@
8 8 </div>
9 9 </template>
10 10 <script lang="ts">
11   - import { defineComponent } from 'vue';
  11 + import { defineComponent, ref } from 'vue';
12 12 import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
13 13 import { optionsListApi } from '/@/api/demo/select';
14 14  
15 15 import { demoListApi } from '/@/api/demo/table';
  16 + const optionsData = ref([]);
16 17 const columns: BasicColumn[] = [
17 18 {
18 19 title: '输入框',
... ... @@ -87,6 +88,17 @@
87 88 resultField: 'list',
88 89 labelField: 'name',
89 90 valueField: 'id',
  91 + onOptionsChange(options) {
  92 + optionsData.value = options;
  93 + },
  94 + },
  95 + editValueMap(value: any) {
  96 + const found = optionsData.value.find((option) => option.id === value);
  97 + if (found) {
  98 + return found.name;
  99 + } else {
  100 + return value;
  101 + }
90 102 },
91 103 width: 200,
92 104 },
... ...
src/views/demo/table/EditRowTable.vue
  View file @535bddd
... ... @@ -20,6 +20,8 @@
20 20 import { optionsListApi } from '/@/api/demo/select';
21 21  
22 22 import { demoListApi } from '/@/api/demo/table';
  23 + const optionsData = ref([]);
  24 +
23 25 const columns: BasicColumn[] = [
24 26 {
25 27 title: '输入框',
... ... @@ -98,6 +100,17 @@
98 100 resultField: 'list',
99 101 labelField: 'name',
100 102 valueField: 'id',
  103 + onOptionsChange(options) {
  104 + optionsData.value = options;
  105 + },
  106 + },
  107 + editValueMap(value: any) {
  108 + const found = optionsData.value.find((option) => option.id === value);
  109 + if (found) {
  110 + return found.name;
  111 + } else {
  112 + return value;
  113 + }
101 114 },
102 115 width: 200,
103 116 },
... ... @@ -149,7 +162,6 @@
149 162 components: { BasicTable, TableAction },
150 163 setup() {
151 164 const currentEditKeyRef = ref('');
152   -
153 165 const [registerTable] = useTable({
154 166 title: '可编辑行示例',
155 167 titleHelpMessage: [
... ...