fix(demo): fix display problem of editable table with `apiSelect`
修复ApiSelect在可编辑表格中的显示问题
This commit is contained in:
parent
18567e13a6
commit
535bdddf91
|
|
@ -8,11 +8,12 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent, ref } from 'vue';
|
||||||
import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
|
import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
|
||||||
import { optionsListApi } from '/@/api/demo/select';
|
import { optionsListApi } from '/@/api/demo/select';
|
||||||
|
|
||||||
import { demoListApi } from '/@/api/demo/table';
|
import { demoListApi } from '/@/api/demo/table';
|
||||||
|
const optionsData = ref([]);
|
||||||
const columns: BasicColumn[] = [
|
const columns: BasicColumn[] = [
|
||||||
{
|
{
|
||||||
title: '输入框',
|
title: '输入框',
|
||||||
|
|
@ -87,6 +88,17 @@
|
||||||
resultField: 'list',
|
resultField: 'list',
|
||||||
labelField: 'name',
|
labelField: 'name',
|
||||||
valueField: 'id',
|
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,
|
width: 200,
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,8 @@
|
||||||
import { optionsListApi } from '/@/api/demo/select';
|
import { optionsListApi } from '/@/api/demo/select';
|
||||||
|
|
||||||
import { demoListApi } from '/@/api/demo/table';
|
import { demoListApi } from '/@/api/demo/table';
|
||||||
|
const optionsData = ref([]);
|
||||||
|
|
||||||
const columns: BasicColumn[] = [
|
const columns: BasicColumn[] = [
|
||||||
{
|
{
|
||||||
title: '输入框',
|
title: '输入框',
|
||||||
|
|
@ -98,6 +100,17 @@
|
||||||
resultField: 'list',
|
resultField: 'list',
|
||||||
labelField: 'name',
|
labelField: 'name',
|
||||||
valueField: 'id',
|
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,
|
width: 200,
|
||||||
},
|
},
|
||||||
|
|
@ -149,7 +162,6 @@
|
||||||
components: { BasicTable, TableAction },
|
components: { BasicTable, TableAction },
|
||||||
setup() {
|
setup() {
|
||||||
const currentEditKeyRef = ref('');
|
const currentEditKeyRef = ref('');
|
||||||
|
|
||||||
const [registerTable] = useTable({
|
const [registerTable] = useTable({
|
||||||
title: '可编辑行示例',
|
title: '可编辑行示例',
|
||||||
titleHelpMessage: [
|
titleHelpMessage: [
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue