接到了一个简单的需求,就是要做一个简单的省市县三联动。这种网上肯定会有相对应的代码。所以就不自己写了。找到了,首先是安装
cnpm install element-china-area-data -S
然后就是应用了。然后在过程中,发现了一个小问题,就是只能获取到选中的value,但是没有获取到选中的label,然后去网站上搜索,搜到了两个也不知道博主再说什么。然后自己去研究element的说明文档,真的还发现了能利用的。先把文档放上 ,然后大家看下截图
getCheckedNodes就能获取到,现在选中的节点,这个节点中就包含了,现在选中的所有的信息。我把打印的信息的截图,简单的给大家看下。
![](https://i-blog.csdnimg.cn/blog_migrate/d14d2df5aa5923dc38af677401c09c42.png)
![](https://i-blog.csdnimg.cn/blog_migrate/15251aa0bb664bfa873bcb130c219ad8.png)
这里就能看到,选中的节点的内容了,就能获取到选中的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>