这个没什么难点,就是找数据挺麻烦。我是直接拿的vant的数据。再通过一系列的js操作转换成了一个树结构的对象。选传一个zAreaObj,因为基于element的样式,所以这个对象里面基本都是他的原生属性。
此组件已上传至npm,可以直接安装使用
npm install ztc-vue
main.js引入
import ztcVue from 'ztc-vue'; //引入邹田聪的组件
import 'ztc-vue/lib/ztc-vue.css'; //引入邹田聪的组件样式
Vue.use(ztcVue);
页面直接使用
<z-area/>
1、组件源码main.vue
<template>
<el-cascader ref="zArea"
v-model="zAreaObj.value"
:options="zAreaObj.options||areaList"
:props="zAreaObj.props"
:size="zAreaObj.size"
:placeholder="zAreaObj.placeholder"
:disabled="zAreaObj.disabled"
:clearable="zAreaObj.clearable"
:show-all-levels="zAreaObj.showAllLevels"
:collapse-tags="zAreaObj.collapseTags"
:separator="zAreaObj.separator"
:filterable="zAreaObj.filterable"
:filter-method="zAreaObj.filterMethod"
:debounce="zAreaObj.debounce"
:before-filter="zAreaObj.beforeFilter"
:popper-class="zAreaObj.popperClass"
:expandTrigger="zAreaObj.expandTrigger"
:multiple="zAreaObj.multiple"
:lazy="zAreaObj.lazy"
:lazyLoad="zAreaObj.lazyLoad"
@change="change"
@expand-change="expandChange" />
</template>
<script>
import areaList from './main.json'
export default {
name: 'z-area',
props: {
zAreaObj: {
type: Object,
default: () => {
return {}
}
},
},
data() {
return {
areaList,
}
},
methods: {
change(val) {
this.$emit('zAreaChange', val, this.$refs.zArea.getCheckedNodes()[0])
},
expandChange(val) {
this.$emit('zAreaExpandChange', val, this.$refs.zArea.getCheckedNodes()[0])
},
},
}
</script>
2、json文件
3、测试使用
<template>
<zArea :zAreaObj="zAreaObj" @zAreaChange="zAreaChange"/>
</template>
<script>
import zArea from '../../../../packages/z-area/src/main.vue'
export default {
components: {
zArea
},
data() {
return {
zAreaObj:{
value:['110000','110100','110102']
}
}
},
methods: {
zAreaChange(val,zAreaObj){
console.log(val,zAreaObj)
}
},
}
</script>
4、效果预览