基于element的Cascader的省市县联动

  接到了一个简单的需求,就是要做一个简单的省市县三联动。这种网上肯定会有相对应的代码。所以就不自己写了。找到了,首先是安装

cnpm install element-china-area-data -S

然后就是应用了。然后在过程中,发现了一个小问题,就是只能获取到选中的value,但是没有获取到选中的label,然后去网站上搜索,搜到了两个也不知道博主再说什么。然后自己去研究element的说明文档,真的还发现了能利用的。先把文档放上 ,然后大家看下截图

getCheckedNodes就能获取到,现在选中的节点,这个节点中就包含了,现在选中的所有的信息。我把打印的信息的截图,简单的给大家看下。

这里就能看到,选中的节点的内容了,就能获取到选中的label。下面把整个的代码都给出来;

<template>
     <div id="ssx">
         <p>省市县三级联动测试</p>
         <el-cascader
             size="large"
             :options="options"
             v-model="selectedOptions"
             @change="handleChange"
             ref="shengshi"
         ></el-cascader>
     </div>
 </template>
 <script>
 import {
   provinceAndCityData,
   regionData,
   provinceAndCityDataPlus,
   regionDataPlus,
   CodeToText,
   TextToCode
 } from "element-china-area-data";
 export default {
   name: "ssx",
   data() {
     return {
       options: provinceAndCityData,
       selectedOptions: ['130000', '130300']// 这里直接赋值,就能回显
     };
   },
   props: {},
   mounted() {
     console.log(provinceAndCityData);
   },
   components: {},
   computed: {},
   methods: {
     handleChange() {
       
       console.log(this.selectedOptions);
       var arr = this.$refs.shengshi.getCheckedNodes();
       console.log(arr); // 这里就是获取到的所有的数据。就能从中获取到想要的label和value
     }
   }
};
</script>
<style lang="scss" scoped>
</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue Element UI 提供了一些组件和方法来实现联动选择。以下是一种实现方式: 1. 安装 Element UI:首先确保你的项目中已经安装了 Vue 和 Element UI。如果没有安装,可以使用 npm 或者 yarn 进行安装: ```bash npm install element-ui --save # 或者 yarn add element-ui ``` 2. 引入需要的组件:在你的 Vue 项目入口文件(一般是 main.js)中,引入 Element UI 的样式和需要的组件: ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 3. 创建组件:创建一个包含区选择的组件,可以使用 `el-cascader` 组件来实现: ```vue <template> <div> <el-cascader :options="options" v-model="selectedValues" :props="props" @change="handleCascaderChange" ></el-cascader> </div> </template> <script> export default { data() { return { options: [ { value: 'province1', label: '份1', children: [ { value: 'city1', label: '城1', children: [ { value: 'district1', label: '区域1' }, { value: 'district2', label: '区域2' } ] }, { value: 'city2', label: '城2', children: [ { value: 'district3', label: '区域3' }, { value: 'district4', label: '区域4' } ] } ] }, // 其他区数据 ], selectedValues: [] }; }, computed: { props() { return { value: 'value', label: 'label', children: 'children' }; } }, methods: { handleCascaderChange(selectedValues) { // 处理区选择变化的逻辑 console.log(selectedValues); } } }; </script> ``` 在上面的代码中,通过 `options` 数组来定义区的数据结构,然后使用 `el-cascader` 组件来展示选择框。`v-model` 指令绑定选中的值,`@change` 事件监听选择变化。 这样就实现了一个简单的联动选择。你可以根据实际需求自定义数据结构和样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值