• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

element+el-cascader省市区级联框使用

开发技术 开发技术 5小时前 2次浏览

首先npm install element-china-area-data 或者 cnpm install element-china-area-data

引入:import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from ‘element-china-area-data’

注释:/*provinceAndCityData是省市二级联动数据(不带“全部”选项)

regionData是省市区三级联动数据(不带“全部”选项)

provinceAndCityDataPlus是省市区三级联动数据(带“全部”选项)

regionDataPlus是省市区三级联动数据(带“全部”选项) “全部”选项绑定的value是空字符串””

CodeToText是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText[‘110000’]输出北京市

TextToCode是个大对象,属性是汉字,属性值是区域码 用法例如:TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105 */

省市区三级联动(不带“全部”选项)代码:

<template>
 <el-form :model=”form” :rules=”rules” ref=”ruleForm”>
            <el-form-item label=”地理位置” prop=”selectedOptions”>
                <el-cascader size=”large” :options=”options” v-model=”form.selectedOptions” @change=”handleChange” style=”width:40%;”></el-cascader>
            </el-form-item>
 </el-form>
</template>
<script>
import commonTable from ‘./../components/commonTable’
import pagination from ‘./../components/commonTable’
import { regionData,CodeToText } from ‘element-china-area-data’
    export default {
        components: {
            commonTable,
            pagination
        },
        data() {
            return {
                form: {
                    selectedOptions:[],
                    provinceId:null,
                    provinceName: “”, //省
                    cityId:null,
                    cityName: “”, //市
                    regionId:null,
                    regionName: “”, // 区,
                },
                rules: {
                    selectedOptions: [
                        { required: true, message: ‘请选择地理位置’, trigger: ‘change’ }
                    ],
                },
                options: regionData,
                selectedOptions:[],
                CodeToText:CodeToText,
            }
        },
        methods: {
            handleChange (value) {
                this.form.provinceId = value[0]
                this.form.provinceName = CodeToText[value[0]]
                this.form.cityId = value[1]
                this.form.cityName = CodeToText[value[1]]
                this.form.regionId = value[2]
                this.form.regionName = CodeToText[value[2]]
            },
        },
    }
</script>

程序员灯塔
转载请注明原文链接:element+el-cascader省市区级联框使用
喜欢 (0)