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

修复ApiSelect在可编辑表格中的显示问题
This commit is contained in:
无木 2021-07-19 00:51:02 +08:00
parent 18567e13a6
commit 535bdddf91
2 changed files with 26 additions and 2 deletions

View File

@ -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,
},

View File

@ -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: [