Element 可输入搜索的下拉选择框& layer 调用弹窗子窗口后返回数据&Vue的watch 监听&Jq的数据赋值、html添加元素

本文链接：https://blog.csdn.net/weixin_41451078/article/details/114585270

Element 可输入搜索的下拉选择框

先看效果图

前端代码

Element 的属性：
Filterable:可输入查找，过滤
allow-create：允许生成新词
clearable：可清除选项
multiple：可多选，去掉即单选

<div class="form-group">
	<label class="control-label">区域:</label> 
<el-select v-model="data.device" placeholder="请选择或输入" 
          filterable allow-create clearable multiple>
		<el-option
			v-for="item in code.deviceList"
			:key="item.value"
			:label="item.name"
			:value="item.value">
		</el-option>
 	</el-select>
</div>

此下拉复选框选择的内容不是单行显示，若多选后会换行，导致其他页面布局稍有影响，若想多选内容一行显示，则重写相关样式即可

.el-select__tags {
    flex-wrap: inherit !important;
    overflow-x: auto !important;
}

layer 父窗口调用子窗口后返回数据

父窗口只能调用子窗口的方法
可将数据放在子窗口的方法中进行返回

/*打开表单*/
function openForm(){
	url=_ctx+"/dqz/positionPage";
	top.layer.open({
		type: 2,
		title: "搜索点位",
		content:url,
		area: ["90%", "90%"],
		btn: ["确定", "取消"],
   		zIndex: layer.zIndex, //多窗口模式，层叠打开
    	success: function(layero){
        	top.layer.setTop(layero);
        	 _frameContent = layero;
        },
		yes: function (index, layero) {
			//获取子窗口
            var _contentWindow = _frameContent.find("iframe")[0].contentWindow;
			_contentWindow.setPosition();//子窗口方法，返回数据
			//将子窗口方法的返回数据赋值给父窗口
			vmData.data.longitude=_contentWindow.setPosition().lon;
			vmData.data.latitude=_contentWindow.setPosition().lat;
            top.layer.close(index);
		}
		
	});

Vue的初始化

var vmData={
		data:{		
			longitude:"",
			latitude:"",
			regionV:""
        },
		code:{
		}
}
var vm = new Vue({
	el : "#frame",
	data :vmData ,
	methods:{
		drawRegions :function(nv){
		
		}
	},
	mounted:function(){
		
	},
    watch:{//监听data.regionV的值，若值反正改变即执行方法
     	"data.regionV":function(nv,ov){
     		this.drawRegions(nv);
     	}
     }
});

jq根据id对html页面进行添加

//前端页面
<select  id="region">
	<option value=""></option>
</select>

//jq  append
$("#region").append("<option value='"+msg.data[i].name+"'>"+msg.data[i].name+"</option>");

数组赋值

//定义初始化数组
flag:[{"name":"否","value":"否"},{"name":"是","value":"是"}]

var region=[];
$.get(_ctx+"/sys/area/list",{},function(msg){
	for(var i=1; i<msg.data.length;i++){
	   region.push({'value':msg.data[i].name,'name':msg.data[i].name});
   }
});