vue elementui实现一个可搜索查询的省市区选择效果代码-html代码-BFW代码库

vue elementui实现一个可搜索查询的省市区选择效果代码

代码语言：html

所属分类：选择器

代码描述：vue elementui实现一个可直接输入文字搜索查询或下拉选择省市区地址的效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/element-ui.2.15.1.css">


</head>

<body>
    <div id="myVue">

        <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="">
                一.此地区插件基于element-ui编写
            </el-form-item>
            <el-form-item label="">
                二.此地区插件功能如下：1.可以查询搜索 2.可以清楚输入框内的记录
            </el-form-item>
            <el-form-item label="所在地区：">
                <el-cascader :options="CityInfo" v-model="form.selectedOptions" :change-on-select="true" :clearable="true" :filterable="true" @change="handleChange">
                </el-cascader>
                <span>所选地区：{{form.city | myAddressCity}}{{form.erae | myAddressErae}}{{form.minerae | myAddressMinerae}}</span>
            </el-form-item>
        </el-form>
    </div>
    <!--js类引用-->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/element-ui.2.15.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/city-data.js"></script>
    <script type="text/javascript">
        /*模拟数据*/
    var addressdatas = {
    	addressdata:[
    		{
    			name:"吴浩然",
    			city:"1",
    			erae : '1',
    			minerae : '1',
    			maxnerae:'嘉园一里9号楼3',
    			selectedOptions:[1,1,1],
    			phone:18347460829,
    			addressDefult:false,
    			addressIsShow:false,
    			isShowDefult:false,
    		},
    		{
    			name:"张三",
    			city:"1",
    			erae : '1',
    			minerae : '1',
    			selectedOptions:[1,1,1],
    			maxnerae:'嘉园一里9号楼3',
    			phone:18347460829,
    			addressDefult:false,
    			addressIsShow:false,
    			isShowDefult:false,
    		},
    		{
    			name:"李四",
    			city:"1",
    			erae : '1',
    			minerae : &#.........完整代码请登录后点击上方下载按钮下载查看