基于Vue3和Element-plus的elui-china-area-dht省市区级联组件应用

- 效果

- 使用

• 安装： npm i elui-china-area-dht
• 页面中引入：

<el-form :model="userForm" ref="nameRef" label-width="80px" label-position="right" class="demo-ruleForm">
    ...
    <el-form-item label="省/市/区" prop="addr">
        <elui-china-area-dht @change="onChange" v-model="userForm.addr"></elui-china-area-dht>
    </el-form-item>
    ...
</el-form>

import { EluiChinaAreaDht} from 'elui-china-area-dht'

• 定义并使用：

export default {
        name: "Setting",
        components: {
            EluiChinaAreaDht,  //定义组件
        },
        setup(){
            const nameRef=ref(null)
            const state=reactive({
                userInfo:null,
                userId:null,
                userForm:{
                    ...        //此处省略
                    addr:[],   //定义数组存储级联选择结果
                },
            })
            onMounted(() => { 
                getAdminInfo().then(res=>{  //后台获取用户信息（省市区初始值）
                    const userInfo = res.data
                    ...
                    const listAddr=[]      //这里需要重新定义新数组再赋值否则页面不显示
                    listAddr.push(userInfo.province)  //后台省市区三个字段存值
                    listAddr.push(userInfo.city)
                    listAddr.push(userInfo.district)
                    state.userForm.addr=listAddr
                    console.log("addr>>>"+state.userForm.addr) 
                    //输出初始值>>>[310000,310100,310105]，数据库存储的也是省市区编码
                })
            })
            const chinaData = new EluiChinaAreaDht.ChinaArea().chinaAreaflat
            const onChange=(e)=>{
                const one=chinaData[e[0]]
                const two=chinaData[e[1]]
                console.log(one)  //输出每次选择后的返回值，见下图
                console.log(two)
            }
            //提交表单
            const submitUserInfo = () => {
                nameRef.value.validate((vaild) => {
                    if (vaild) {
                        ...
                        // const province=chinaData[state.userForm.addr[0]].label
                        // 参数取值，label即选择市的中文“江苏省”
                        const province=state.userForm.addr[0] 
                        const city=state.userForm.addr[1]
                        const district=state.userForm.addr[2]    //提交后台省市区编码即可
                        editAdminInfo(...,province,city,district).then(res=>{
                            ...
                            }
                        })
                    }
                })
            }
            return {
                ...toRefs(state),
                onChange,
                nameRef,
                submitUserInfo
            }
        }

    }

onChange()中输出选择后的值，第一个obj为省值，第二个obj为市区值

• 带参使用

  该组件基于el-cascader组件所以支持Cascader 级联选择器 | Element Plus (gitee.io)下所有参数，除options参数为个人传入,其余都为外部传入。
  以下为自定义参数使用：

<elui-china-area-dht isall :leave="2" @change="onChange"></elui-china-area-dht>

参数	类型	说明	可选值	默认值
isall	Boolean	是否有全部按钮		false
leave	Number	数据可选层级，3代表省市区三级级联选项	0,1,2,3	3

- 源码及说明文档

npm地址：www.npmjs.com/package/elu…
git地址：github.com/ht-sauce/el…
语雀说明文档地址：www.yuque.com/cv8igf/gaxp…

- 其它

数据基于：github.com/airyland/ch…
核心原理说明：elui-china-area-dht发布，基于vue3和element-plus的省市区级联组件 - 掘金 (juejin.cn) 参考 # 海天酱油_htSauce www.yuque.com/cv8igf/oy3c…