Skip to content

Commit cb328fe

Browse files
gimmyhehegimmyhehe
authored
fix(grid): fix insert row can't change to edit mode (#3876)
* fix(grid): 修复insert方法插入的数据无法进入编辑态的问题 * fix(grid): optimze e2e test * fix(grid): optimze e2e test * fix(grid): optimze e2e test * fix(grid): fix insert row not has row_new class
1 parent dba45e3 commit cb328fe

File tree

6 files changed

+105
-43
lines changed

6 files changed

+105
-43
lines changed

‎examples/sites/demos/pc/app/grid/data-source/undefined-field-defalut-value-composition-api.vue‎

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,28 @@
11
<template>
2-
<tiny-grid :data="tableData" :edit-config="editConfig">
3-
<tiny-grid-column field="field1" title="所属区域" :editor="{}">
4-
<template #edit="{ row }">
5-
<tiny-input v-model="row.field1" />
6-
</template>
7-
</tiny-grid-column>
8-
<tiny-grid-column field="field2" title="地址" :editor="{ defaultValue: '' }">
9-
<template #edit="{ row }">
10-
<tiny-input v-model="row.field2" />
11-
</template>
12-
</tiny-grid-column>
13-
<tiny-grid-column field="field3" title="邮编" :editor="{ defaultValue: '' }">
14-
<template #edit="{ row }">
15-
<tiny-input v-model="row.field3" />
16-
</template>
17-
</tiny-grid-column>
18-
</tiny-grid>
2+
<div>
3+
<tiny-button @click="addRow">新增行</tiny-button>
4+
<tiny-grid ref="gridRef" :data="tableData" :edit-config="editConfig">
5+
<tiny-grid-column field="field1" title="所属区域" :editor="{}">
6+
<template #edit="{ row }">
7+
<tiny-input v-model="row.field1" />
8+
</template>
9+
</tiny-grid-column>
10+
<tiny-grid-column field="field2" title="地址" :editor="{ defaultValue: '' }">
11+
<template #edit="{ row }">
12+
<tiny-input v-model="row.field2" />
13+
</template>
14+
</tiny-grid-column>
15+
<tiny-grid-column field="field3" title="邮编" :editor="{ defaultValue: '' }">
16+
<template #edit="{ row }">
17+
<tiny-input v-model="row.field3" />
18+
</template>
19+
</tiny-grid-column>
20+
</tiny-grid>
21+
</div>
1922
</template>
2023

2124
<script setup>
22-
import { TinyGrid, TinyGridColumn, TinyInput } from '@opentiny/vue'
25+
import { TinyGrid, TinyGridColumn, TinyInput, TinyButton } from '@opentiny/vue'
2326
import { ref } from 'vue'
2427
2528
const tableData = ref([
@@ -36,4 +39,10 @@ const editConfig = ref({
3639
mode: 'cell',
3740
autofocus: 'input'
3841
})
42+
43+
const gridRef = ref(null)
44+
45+
const addRow = () => {
46+
gridRef.value.insert({})
47+
}
3948
</script>

‎examples/sites/demos/pc/app/grid/data-source/undefined-field-defalut-value.spec.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ test('缺省数据默认值', async ({ page }) => {
88

99
const firstRow = demo.locator('.tiny-grid-body__row:visible').nth(0)
1010

11+
// 缺省值的修改能够正常显示角标
1112
await firstRow.locator('td').nth(1).click()
1213
await firstRow.locator('.tiny-input__inner').click()
1314
await firstRow.locator('.tiny-input__inner').fill('1')
@@ -17,4 +18,11 @@ test('缺省数据默认值', async ({ page }) => {
1718
await firstRow.locator('.tiny-input__inner').fill('2')
1819
await firstRow.locator('td').nth(1).click()
1920
await expect(firstRow.locator('td').nth(2)).toHaveClass(/col__valid-success/)
21+
22+
// 新增行能成功进入编辑态
23+
await demo.locator('.tiny-button').click()
24+
await firstRow.locator('td').nth(1).click()
25+
await firstRow.locator('.tiny-input__inner').click()
26+
await firstRow.locator('.tiny-input__inner').fill('1')
27+
await expect(firstRow.locator('.tiny-input__inner')).toHaveValue('1')
2028
})

‎examples/sites/demos/pc/app/grid/data-source/undefined-field-defalut-value.vue‎

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,35 @@
11
<template>
2-
<tiny-grid :data="tableData" :edit-config="editConfig">
3-
<tiny-grid-column field="field1" title="所属区域" :editor="{}">
4-
<template #edit="{ row }">
5-
<tiny-input v-model="row.field1" />
6-
</template>
7-
</tiny-grid-column>
8-
<tiny-grid-column field="field2" title="地址" :editor="{ defaultValue: '' }">
9-
<template #edit="{ row }">
10-
<tiny-input v-model="row.field2" />
11-
</template>
12-
</tiny-grid-column>
13-
<tiny-grid-column field="field3" title="邮编" :editor="{ defaultValue: '' }">
14-
<template #edit="{ row }">
15-
<tiny-input v-model="row.field3" />
16-
</template>
17-
</tiny-grid-column>
18-
</tiny-grid>
2+
<div>
3+
<tiny-button @click="addRow">新增行</tiny-button>
4+
<tiny-grid ref="grid" :data="tableData" :edit-config="editConfig">
5+
<tiny-grid-column field="field1" title="所属区域" :editor="{}">
6+
<template #edit="{ row }">
7+
<tiny-input v-model="row.field1" />
8+
</template>
9+
</tiny-grid-column>
10+
<tiny-grid-column field="field2" title="地址" :editor="{ defaultValue: '' }">
11+
<template #edit="{ row }">
12+
<tiny-input v-model="row.field2" />
13+
</template>
14+
</tiny-grid-column>
15+
<tiny-grid-column field="field3" title="邮编" :editor="{ defaultValue: '' }">
16+
<template #edit="{ row }">
17+
<tiny-input v-model="row.field3" />
18+
</template>
19+
</tiny-grid-column>
20+
</tiny-grid>
21+
</div>
1922
</template>
2023

2124
<script>
22-
import { TinyGrid, TinyGridColumn, TinyInput } from '@opentiny/vue'
25+
import { TinyGrid, TinyGridColumn, TinyInput, TinyButton } from '@opentiny/vue'
2326
2427
export default {
2528
components: {
2629
TinyGrid,
2730
TinyGridColumn,
28-
TinyInput
31+
TinyInput,
32+
TinyButton
2933
},
3034
data() {
3135
return {
@@ -43,6 +47,11 @@ export default {
4347
autofocus: 'input'
4448
}
4549
}
50+
},
51+
methods: {
52+
addRow() {
53+
this.$refs.grid.insert({})
54+
}
4655
}
4756
}
4857
</script>

‎packages/vue/src/grid/src/composable/useNormalData.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { hooks } from '@opentiny/vue-common'
33
export const useNormalData = ({ props, visibleColumn }) => {
44
const $table = hooks.getCurrentInstance()?.proxy
55
// 原始数据
6-
const rawData = hooks.ref(null)
6+
const rawData = hooks.ref([])
77
// 原始数据版本
88
const rawDataVersion = hooks.ref(0)
99

‎packages/vue/src/grid/src/edit/src/methods.ts‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,22 @@ import {
4848
handleActivedTryActive
4949
} from './utils/handleActived'
5050

51-
function operArrs({ _vm, editStore, newRecords, newRecordsCopy, nowData, row, tableFullData, tableSourceData }) {
51+
function operArrs({
52+
_vm,
53+
editStore,
54+
newRecords,
55+
newRecordsCopy,
56+
nowData,
57+
row,
58+
tableFullData,
59+
tableSourceData,
60+
rawData
61+
}) {
5262
if (row === -1) {
5363
Array.prototype.push.apply(nowData, newRecords)
5464
Array.prototype.push.apply(tableFullData, newRecords)
5565
Array.prototype.push.apply(tableSourceData, newRecordsCopy)
66+
Array.prototype.push.apply(rawData, newRecords)
5667
}
5768

5869
if (row && row !== -1) {
@@ -67,12 +78,19 @@ function operArrs({ _vm, editStore, newRecords, newRecordsCopy, nowData, row, ta
6778
Array.prototype.splice.apply(nowData, [targetIndex, 0].concat(newRecords))
6879
Array.prototype.splice.apply(tableFullData, [insertIndex, 0].concat(newRecords))
6980
Array.prototype.splice.apply(tableSourceData, [insertIndex, 0].concat(newRecordsCopy))
81+
82+
let rawInsertIndex = rawData.indexOf(row)
83+
84+
if (rawInsertIndex > -1) {
85+
Array.prototype.splice.apply(rawData, [rawInsertIndex, 0].concat(newRecords))
86+
}
7087
}
7188

7289
if (!row) {
7390
Array.prototype.unshift.apply(nowData, newRecords)
7491
Array.prototype.unshift.apply(tableFullData, newRecords)
7592
Array.prototype.unshift.apply(tableSourceData, newRecordsCopy)
93+
Array.prototype.unshift.apply(rawData, newRecords)
7694
}
7795

7896
Array.prototype.unshift.apply(editStore.insertList, newRecords)
@@ -129,7 +147,16 @@ export default {
129147
},
130148
// 根据位置从指定行添加数据
131149
_insertAt(records, row) {
132-
let { afterFullData, editStore, isAsyncColumn, scrollYLoad, tableFullData, tableSourceData = [], treeConfig } = this
150+
let {
151+
afterFullData,
152+
editStore,
153+
isAsyncColumn,
154+
scrollYLoad,
155+
tableFullData,
156+
tableSourceData = [],
157+
treeConfig,
158+
rawData
159+
} = this
133160

134161
if (treeConfig) {
135162
throw new Error(error('ui.grid.error.treeInsert'))
@@ -154,7 +181,17 @@ export default {
154181
let newRecords = records.map((record) => hooks.reactive(this.defineField({ ...record })))
155182
let newRecordsCopy = clone(newRecords, true)
156183

157-
operArrs({ _vm: this, editStore, newRecords, newRecordsCopy, nowData, row, tableFullData, tableSourceData })
184+
operArrs({
185+
_vm: this,
186+
editStore,
187+
newRecords,
188+
newRecordsCopy,
189+
nowData,
190+
row,
191+
tableFullData,
192+
tableSourceData,
193+
rawData
194+
})
158195

159196
this.updateCache()
160197
this.handleTableData(true)
@@ -236,7 +273,6 @@ export default {
236273
// 修改缓存
237274
this.updateCache()
238275
this.handleTableData(true)
239-
240276
this.checkSelectionStatus()
241277
this.updateFooter()
242278
if (scrollYLoad) {

‎packages/vue/src/grid/src/table/src/methods.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -326,7 +326,7 @@ const Methods = {
326326
})
327327
},
328328
updateRawData(datas) {
329-
this.rawData = datas
329+
this.rawData = [...datas]
330330
this.rawDataVersion += 1
331331
},
332332
getOriginRow(row) {

0 commit comments

Comments
 (0)