elementUI cascader地址回显(默认地址)

elementUI cascader地址回显(默认展示地址)

  • 效果图

引入elementUI地区组件(element-china-area-data)

npm install element-china-area-data -S
  1. provinceAndCityData是省市二级联动数据(不带“全部”选项)
  2. regionData是省市区三级联动数据(不带“全部”选项)
  3. provinceAndCityDataPlus是省市区三级联动数据(带“全部”选项)
  4. regionDataPlus是省市区三级联动数据(带“全部”选项)
  5. “全部"选项绑定的value是空字符串”"
  6. CodeToText是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText[‘110000’]输出北京市
  7. TextToCode是个大对象,属性是汉字,属性值是区域码 用法例如:TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105
 <el-cascader
   size="large"
   :options="options"
   v-model="selectedOptions"
   @change="addressChange">
 </el-cascader>
 //看个人需求引入
import { regionData, CodeToText } from 'element-china-area-data'
 export default {
  data() {
    return {
    	options: regionData,							//地区下拉列表
    	selectedOptions:["440000", "440300", "440304"],	//省市区id 
    }
  }
}

效果图

elementUI cascader地址回显(默认地址)_第1张图片

你可能感兴趣的:(elementUI,cascader,vue)