vxcontrol/ncform
1
0
Fork 0
mirror of https://github.com/vxcontrol/ncform.git synced 2026-07-19 18:23:32 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(ncform-theme-elementui): auto selected when adding and deleting

Browse Source 
fix #71
This commit is contained in:
daniel.xiao
2019-06-04 20:00:24 +08:00
parent cc5209b998
commit 5ce6e36564
2 changed files with 43 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/tabs.spec.js
+25 -5
View File
@@ -79,15 +79,35 @@ context('Tabs', () => {
cy.get('legend').click();
cy.get('legend').next().should('be.visible');
cy.get('.el-icon-plus').click()
cy.get('.el-icon-plus').click();
cy.get('.el-tabs__item').its('length').should('equal', 2);
cy.get('.el-tabs__item:last-child').should('have.class', 'is-active');
cy.get('input').eq(0).type('daniel')
// Add two items, now has three items
cy.get('.el-icon-plus').click();
// Delete the first item with selected state, the next item is auto selected
cy.get('.el-tabs__item').eq(0).click();
cy.get('.el-icon-close').eq(0).click();
cy.get('.el-tabs__item:first-child').should('have.class', 'is-active');
// Delete the last item with selected state, the prev item is auto selected
cy.get('.el-icon-plus').click();
cy.get('.el-icon-close').eq(2).click();
cy.get('.el-tabs__item:last-child').should('have.class', 'is-active');
// Now has three items
cy.get('.el-icon-plus').click();
// Delete the item after active item, no change
cy.get('.el-tabs__item').eq(1).click();
cy.get('input').eq(1).type('sarah')
cy.get('.el-icon-close').eq(2).click();
cy.get('.el-tabs__item:last-child').should('have.class', 'is-active');
// Delet the item before active item, no change
cy.get('.el-icon-close').eq(0).click({ force: true });
cy.get('.el-tabs__item:last-child').should('have.class', 'is-active');
cy.get('.el-icon-close:visible').click();
cy.get('.el-tabs__item').its('length').should('equal', 1);
});
cy.get('legend')
packages/ncform-theme-elementui/src/components/layout-comps/array-tabs.vue
+18 -1
View File
@@ -7,7 +7,7 @@
<i v-if="!mergeConfig.disableCollapse" class="el-collapse-item__arrow" :class="{'el-icon-arrow-up': !collapsed, 'el-icon-arrow-down': collapsed}"></i>
</legend>
<el-tabs v-show="!collapsed" :closable="!mergeConfig.disableDel" :addable="!mergeConfig.disableAdd" type="card" :tab-position="mergeConfig.tabPosition" @edit="handleTabsEdit">
<el-tabs v-show="!collapsed" :closable="!mergeConfig.disableDel" :addable="!mergeConfig.disableAdd" type="card" :tab-position="mergeConfig.tabPosition" @edit="handleTabsEdit" v-model="activeName">
<el-tab-pane v-for="(dataItem, idx) in schema.value" :key="dataItem.__dataSchema.__id" :name="'' + idx">
<span slot="label">
@@ -104,6 +104,7 @@
data() {
return {
activeName: '0',
defaultConfig: {
tabPosition: 'top',
},
@@ -114,9 +115,25 @@
handleTabsEdit(targetName, action) {
if (action === 'add') {
this.addItem();
this.$data.activeName = (this.schema.value.length - 1) + '';
}
if (action === 'remove') {
this.delItem(targetName, this.mergeConfig.requiredDelConfirm, this.mergeConfig.delConfirmText.item || this.$nclang('delItemTips'));
this.$nextTick(() => {
let tabIdx = parseInt(targetName);
if (targetName === this.$data.activeName) { // Remote item is the active item
if (tabIdx === 0) { // First item
this.$data.activeName = '0'
} else {
this.$data.activeName = (tabIdx - 1) + '';
}
} else {
let activeIdx = parseInt(this.$data.activeName);
if (activeIdx > tabIdx) { // active item at the right side
this.$data.activeName = (activeIdx - 1) + '';
}
}
})
}
}
}