本文介绍了在Vue+Element应用中处理省市区联动的两种方式：使用element-china-area-data组件和v-region组件。v-region组件支持4级行政区域选择，包括Select模式和分组显示。在数据库存储和数据变更处理方面，提供了编辑窗体的示例代码。此外，还提到了自定义组件my-citypicker的实现，通过后端API接口获取并处理省市区数据。
class=“long”
size=“large”
:options=“regionData”
@change=“handleChange”
/>
绑定值：{
{ selectedOptions2 }}
区域码转汉字：{
{ CodeToText[selectedOptions2[0]] }},{
{ CodeToText[selectedOptions2[1]] }},{
{ CodeToText[selectedOptions2[2]] }}
汉字转区域码：{
{ convertTextToCode(CodeToText[selectedOptions2[0]], CodeToText[selectedOptions2[1]], CodeToText[selectedOptions2[2]]) }}
其中数据selectedOptions2格式如下所示:
selectedOptions2: [‘120000’, ‘120100’, ‘120101’],
而选中数据后，获得的数据格式同样是一个数组集合，如下所示:
几种界面组件的效果如下所示。
省市区三级联动的案例Demo代码如下。
最低0.47元/天 解锁文章
扫一扫
8407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
