Go 文档官网Appearance
Nexus
多级联动表单组件。
数据
- 汽车专题省份、城市、经销商三级联动，测试数据：shop.json ；
- 全国省份、市、区三级联动，数据：all_cities.json；
接口
nexusData: 联动数据；bind: 与nexusData数据的key绑定；placeholder: 占位字符串；name: 与 DataForm 配合使用；title: 与 DataForm 配合使用；
示例
省市经销商
<Nexus :nexusData="nexusData" bind="pro" placeholder="请选择省份" ref="pro">
<Nexus bind="city" placeholder="请选择城市" ref="city">
<Nexus bind="shop" placeholder="请选择经销商" ref="shop"/>
</Nexus>
</Nexus>
import { Nexus } from "@go/ui";
import shopData from './shop.json';
export default defineComponent({
components: {
Nexus,
},
data(){
return {
nexusData: shopData,
}
},
methods: {
getValue(){
const proValue = this.$refs.pro.selectVal;
const cityValue = this.$refs.pro.city;
const shopValue = this.$refs.pro.shop;
}
}
})
省市区
<Nexus :nexusData="nexusData" bind="pro" placeholder="请选择省份" ref="pro">
<Nexus bind="city" placeholder="请选择城市" ref="city">
<Nexus bind="county" placeholder="请选择区" ref="county"/>
</Nexus>
</Nexus>
import { Nexus } from "@go/ui";
import allCityData from './all_cities.json';
export default defineComponent({
components: {
Nexus,
},
data(){
return {
nexusData: allCityData,
}
},
methods: {
getValue(){
const proValue = this.$refs.pro.selectVal;
const cityValue = this.$refs.pro.city;
const countyValue = this.$refs.pro.county;
}
}
})