diff --git a/src/area/README.md b/src/area/README.md
index eff701e1f..36ea3cb57 100644
--- a/src/area/README.md
+++ b/src/area/README.md
@@ -47,7 +47,7 @@ Set `columns-num` with 2, you'll have a 2 level picker.
```html
```
diff --git a/src/area/README.zh-CN.md b/src/area/README.zh-CN.md
index 0952ac170..7f0a9cd34 100644
--- a/src/area/README.zh-CN.md
+++ b/src/area/README.zh-CN.md
@@ -46,7 +46,7 @@ Vue.use(Area);
```html
```
diff --git a/src/area/demo/index.vue b/src/area/demo/index.vue
index 8c5e18f20..68113206a 100644
--- a/src/area/demo/index.vue
+++ b/src/area/demo/index.vue
@@ -39,14 +39,14 @@ export default {
title2: '选中省市区',
title3: '配置显示列',
title4: '配置列占位提示文字',
- columnsPlaceholder: ['请选择'],
+ columnsPlaceholder: ['请选择', '请选择', '请选择'],
areaList: AreaList,
},
'en-US': {
title2: 'Initial Value',
title3: 'Columns Number',
title4: 'Columns Placeholder',
- columnsPlaceholder: ['Choose'],
+ columnsPlaceholder: ['Choose', 'Choose', 'Choose'],
areaList: AreaListEn,
}
},
diff --git a/src/area/index.js b/src/area/index.js
index fcfcc1e0d..b78f24db8 100644
--- a/src/area/index.js
+++ b/src/area/index.js
@@ -4,6 +4,8 @@ import { pickerProps } from '../picker/shared';
const [createComponent, bem] = createNamespace('area');
+const COLUMNSPLACEHOLDERCODE = '000000';
+
function isOverseaCode(code) {
return code[0] === '9';
}
@@ -99,14 +101,6 @@ export default createComponent({
name: list[listCode]
}));
- if (this.columnsPlaceholder.length) {
- // set columns placeholder
- result.unshift({
- code: '000000',
- name: this.typeToColumnsPlaceholder[type]
- });
- }
-
if (code) {
// oversea code
if (this.isOverseaCode(code) && type === 'city') {
@@ -116,6 +110,15 @@ export default createComponent({
result = result.filter(item => item.code.indexOf(code) === 0);
}
+ if (this.typeToColumnsPlaceholder[type] && result.length) {
+ // set columns placeholder
+ const codeFill = type === 'province' ? '' : type === 'city' ? COLUMNSPLACEHOLDERCODE.slice(2, 4) : COLUMNSPLACEHOLDERCODE.slice(4, 6);
+ result.unshift({
+ code: `${code}${codeFill}`,
+ name: this.typeToColumnsPlaceholder[type]
+ });
+ }
+
return result;
},
@@ -140,19 +143,28 @@ export default createComponent({
return 0;
},
- onChange(picker, values, index) {
- this.code = values[index].code;
- this.setValues();
- this.$emit('change', picker, picker.getValues(), index);
- },
-
- onConfirm(values, index) {
- values.forEach(value => {
- if (value.code === '000000') {
+ // parse output columns data
+ parseOutputValues(values) {
+ return values.map((value = {}, index) => {
+ value = JSON.parse(JSON.stringify(value));
+ if (!value.code || value.name === this.columnsPlaceholder[index]) {
value.code = '';
value.name = '';
}
+ return value;
});
+ },
+
+ onChange(picker, values, index) {
+ this.code = values[index].code;
+ this.setValues();
+ let getValues = picker.getValues();
+ getValues = this.parseOutputValues(getValues);
+ this.$emit('change', picker, getValues, index);
+ },
+
+ onConfirm(values, index) {
+ values = this.parseOutputValues(values);
this.setValues();
this.$emit('confirm', values, index);
},
@@ -162,7 +174,7 @@ export default createComponent({
if (!code) {
if (this.columnsPlaceholder.length) {
- code = '000000';
+ code = COLUMNSPLACEHOLDERCODE;
} else if (Object.keys(this.county)[0]) {
code = Object.keys(this.county)[0];
} else {
diff --git a/src/area/test/__snapshots__/demo.spec.js.snap b/src/area/test/__snapshots__/demo.spec.js.snap
index 6fbd301c4..800cd7ce5 100644
--- a/src/area/test/__snapshots__/demo.spec.js.snap
+++ b/src/area/test/__snapshots__/demo.spec.js.snap
@@ -262,14 +262,10 @@ exports[`renders demo correctly 1`] = `