mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-08-26 00:26:20 +08:00
fix(demo): fix display problem of editable table with apiSelect
修复ApiSelect在可编辑表格中的显示问题
This commit is contained in:
@@ -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: [
|
||||||
|
Reference in New Issue
Block a user