|
|
@@ -33,6 +33,15 @@
|
|
|
<span class="show-value">{{year ? year : '请选择'}}</span>
|
|
|
</div>
|
|
|
</nut-cell>
|
|
|
+ <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible2')">
|
|
|
+ <span slot="title">
|
|
|
+ <label>城市选择自定义数据</label>
|
|
|
+ </span>
|
|
|
+ <span slot="sub-title">联动~~~</span>
|
|
|
+ <div slot="desc" class="selected-option">
|
|
|
+ <span class="show-value">{{cityCustmer ? cityCustmer : '请选择'}}</span>
|
|
|
+ </div>
|
|
|
+ </nut-cell>
|
|
|
</div>
|
|
|
<!-- demo 年月选择(不联动)-->
|
|
|
<nut-picker
|
|
|
@@ -62,10 +71,49 @@
|
|
|
@close="switchPicker('isVisible1')"
|
|
|
@confirm="setYearValue"
|
|
|
></nut-picker>
|
|
|
+ <!-- demo 城市选择(联动) 自定义-->
|
|
|
+ <nut-picker
|
|
|
+ :is-visible="isVisible2"
|
|
|
+ title="请选择城市"
|
|
|
+ :default-value-data="defaultValueData"
|
|
|
+ :list-data="custmerCityData"
|
|
|
+ @close="switchPicker('isVisible2')"
|
|
|
+ @confirm="setChooseValueCustmer"
|
|
|
+ @choose="updateChooseValueCustmer"
|
|
|
+ @close-update="closeUpdateChooseValueCustmer"
|
|
|
+ ></nut-picker>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+const APIData = [
|
|
|
+ {
|
|
|
+ label: 1,
|
|
|
+ array: [
|
|
|
+ {
|
|
|
+ label: 3,
|
|
|
+ value: "朝阳区"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 4,
|
|
|
+ value: "海淀区"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 2,
|
|
|
+ array: [
|
|
|
+ {
|
|
|
+ label: 5,
|
|
|
+ value: "测试1"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 6,
|
|
|
+ value: "测试2"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+];
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -102,7 +150,7 @@ export default {
|
|
|
"2036",
|
|
|
"2037",
|
|
|
"2038",
|
|
|
- "2039",
|
|
|
+ "2039"
|
|
|
],
|
|
|
["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
|
|
|
],
|
|
|
@@ -150,6 +198,20 @@ export default {
|
|
|
listData1: [
|
|
|
["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"]
|
|
|
],
|
|
|
+ custmerCityData: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ label: 1,
|
|
|
+ value: "北京"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 2,
|
|
|
+ value: "上海"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ ],
|
|
|
+ cityCustmer: null,
|
|
|
+ isVisible2: false,
|
|
|
defaultValueData1: null
|
|
|
};
|
|
|
},
|
|
|
@@ -213,6 +275,23 @@ export default {
|
|
|
this.updateLinkage(self, chooseData[0], 1, chooseData[1], chooseData);
|
|
|
},
|
|
|
|
|
|
+ setChooseValueCustmer(chooseData) {
|
|
|
+ var str = chooseData.map(item => item.value).join("-");
|
|
|
+ this.cityCustmer = str;
|
|
|
+ },
|
|
|
+ closeUpdateChooseValueCustmer(self, chooseData) {
|
|
|
+ this.setChooseValueCustmer(chooseData);
|
|
|
+ },
|
|
|
+ updateChooseValueCustmer(self, index, resValue, cacheValueData) {
|
|
|
+ let { label, value } = resValue;
|
|
|
+ //此处模拟查询API
|
|
|
+ setTimeout(() => {
|
|
|
+ var resItems = APIData.find(item => item.label == label);
|
|
|
+ if (resItems && resItems.array.length) {
|
|
|
+ this.$set(this.custmerCityData, index + 1, resItems.array);
|
|
|
+ }
|
|
|
+ }, 100);
|
|
|
+ },
|
|
|
modifyCity() {
|
|
|
this.updateLinkage("", "重庆", 1, "重庆");
|
|
|
this.defaultValueData = ["重庆", "重庆"];
|