11<!-- -->
22<template >
3- <div >
4- <q-antd-table @register =" registerTable" >
3+ <div >
4+ <q-antd-table @register =" registerTable" >
55 <template #bodyCell =" { column , record } " >
66 <template v-if =" column .key === ' action' " >
77 <q-antd-table-action :actions =" createActions(record)" />
88 </template >
99 </template >
1010 </q-antd-table >
1111 <div > <a-button size =" small" type =" link" @click =" updateData" >添加</a-button ></div >
12- </div >
12+ </div >
1313</template >
1414
1515<script lang="ts" setup>
1616import { useTable } from ' @quantum-design/vue3-antd-pc-ui' ;
1717import { IDataSchema } from ' @quantum-lowcode/schemas' ;
18- import { js_utils_get_uuid } from ' @quantum-lowcode/utils' ;
18+ import { isArray , js_utils_get_uuid } from ' @quantum-lowcode/utils' ;
1919import { cloneDeep } from ' lodash-es' ;
2020import { computed , nextTick , unref } from ' vue' ;
2121
@@ -28,23 +28,23 @@ const props = withDefaults(
2828 value: Partial <IDataSchema & {id: string }>[];
2929 }>(),
3030 {
31- value: [],
31+ value: [] as any ,
3232 }
3333);
3434
35- const emits = defineEmits ([' change' ,' update:value' ]);
35+ const emits = defineEmits ([' change' , ' update:value' ]);
3636
3737const getDataSourceProps = computed (() => {
38- const data = cloneDeep (props .value )
38+ const data = cloneDeep (props .value );
3939 return data .map (item => {
4040 if (! item .id ) {
41- item .id = js_utils_get_uuid (4 )
41+ item .id = js_utils_get_uuid (4 );
4242 }
43- return item
44- })
45- })
43+ return item ;
44+ });
45+ });
4646
47- const [registerTable, {getDataSource, deleteTableDataRecord}] = useTable ({
47+ const [registerTable, {getDataSource, deleteTableDataRecord, insertTableDataRecord, setTableData, }] = useTable ({
4848 pagination: false ,
4949 rowKey: ' id' ,
5050 dataSource: getDataSourceProps ,
@@ -58,7 +58,7 @@ const [registerTable, {getDataSource, deleteTableDataRecord}] = useTable({
5858 sorter: false ,
5959 editRow: true ,
6060 editRule: true ,
61- width: 100
61+ width: 100 ,
6262 },
6363 {
6464 title: ' 属性名称' ,
@@ -68,7 +68,7 @@ const [registerTable, {getDataSource, deleteTableDataRecord}] = useTable({
6868 editRow: true ,
6969 editComponent: ' Input' ,
7070 editRule: true ,
71- width: 100
71+ width: 100 ,
7272 },
7373 {
7474 title: ' 数据类型' ,
@@ -80,16 +80,16 @@ const [registerTable, {getDataSource, deleteTableDataRecord}] = useTable({
8080 editComponent: ' Select' ,
8181 editComponentProps: {
8282 options: [
83- { label: ' 字符串' , value: ' string' },
84- { label: ' 数字' , value: ' number' },
85- { label: ' 布尔值' , value: ' boolean' },
86- { label: ' 对象' , value: ' object' },
87- { label: ' 数组' , value: ' array' },
88- { label: ' null' , value: ' null' },
89- { label: ' any' , value: ' any' },
83+ { label: ' 字符串' , value: ' string' , },
84+ { label: ' 数字' , value: ' number' , },
85+ { label: ' 布尔值' , value: ' boolean' , },
86+ { label: ' 对象' , value: ' object' , },
87+ { label: ' 数组' , value: ' array' , },
88+ { label: ' null' , value: ' null' , },
89+ { label: ' any' , value: ' any' , }
9090 ],
9191 },
92- width: 100
92+ width: 100 ,
9393 },
9494 {
9595 title: ' 描述' ,
@@ -99,7 +99,7 @@ const [registerTable, {getDataSource, deleteTableDataRecord}] = useTable({
9999 sorter: false ,
100100 editRow: true ,
101101 editComponent: ' Input' ,
102- width: 250
102+ width: 250 ,
103103 },
104104 {
105105 title: ' 默认值' ,
@@ -109,8 +109,8 @@ const [registerTable, {getDataSource, deleteTableDataRecord}] = useTable({
109109 editRow: true ,
110110 sorter: false ,
111111 editComponent: ' Input' ,
112- width: 100
113- },
112+ width: 100 ,
113+ }
114114 ],
115115 canResize: false ,
116116});
@@ -130,7 +130,7 @@ function createActions(record:any) {
130130 title: ' 是否删除数据' ,
131131 confirm : () => {
132132 deleteTableDataRecord (record .id );
133- nextTick (() => updateData ())
133+ nextTick (() => updateData ());
134134 },
135135 },
136136 }
@@ -141,7 +141,7 @@ function createActions(record:any) {
141141 label: ' 保存' ,
142142 onClick : () => {
143143 record .onSubmit ();
144- nextTick (() => updateData ())
144+ nextTick (() => updateData ());
145145 },
146146 },
147147 {
@@ -159,10 +159,10 @@ function createActions(record:any) {
159159 ];
160160}
161161
162- function updateData(data ? : any ) {
162+ function updateData() {
163163 const dataSource = getDataSource ().map (item => unref (item .editValueRefs ));
164- if (data ) {
165- dataSource . push ({
164+ if (isArray ( dataSource ) && dataSource . length > 0 ) {
165+ insertTableDataRecord ({
166166 id: js_utils_get_uuid (4 ),
167167 name: ' ' ,
168168 title: ' ' ,
@@ -171,9 +171,21 @@ function updateData(data?: any) {
171171 defaultValue: ' ' ,
172172 editable: true ,
173173 });
174+ } else {
175+ setTableData ([{
176+ id: js_utils_get_uuid (4 ),
177+ name: ' ' ,
178+ title: ' ' ,
179+ type: ' string' ,
180+ description: ' ' ,
181+ defaultValue: ' ' ,
182+ editable: true ,
183+ }]);
174184 }
175- emits (' update:value' , dataSource )
176- emits (' change' , dataSource )
185+ const data = getDataSource ();
186+ console .log (data );
187+ emits (' update:value' , dataSource );
188+ emits (' change' , dataSource );
177189}
178190
179191 </script >
0 commit comments