使用vue实现自定义搜索功能
实现效果如：http://www.ligerui.com/demos/filter/filter.htm
代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.group {
border: 1px solid gray;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<form id="app">
<group v-bind:items="items"></group>
<input type="button" name="name" value="获取值" v-on:click="getValue" />
</form>
</body>
</html>
<script>
var indexs = 1000;
//定义一个组件,其实就是一组条件
var component = Vue.component("group", {
props: ["items"],
data: function () {
return {
}
},
methods: {
addLine: function (event) {
indexs++;
this.items.items.push({
id: indexs,
column: "Id",
local: "equal",
value: "1"
});
},
addGroup:function(){
indexs++;
this.items.items.push({
id: 0,
relation: "and",
items: []
});
},
removeLine: function (id) {
for (var i = 0; i < this.items.items.length; i++) {
if (this.items.items[i].id === id) {
console.log(this.items.items[i]);
this.items.items.splice(i, 1);
break;
}
}
},
removeGroup: function (id) {
for (var i = 0; i < this.items.items.length; i++) {
if (this.items.items[i].id === id) {
console.log(this.items.items[i]);
this.items.items.splice(i, 1);
break;
}
}
}
},
template: '<div class="group"> <div class="line"> <input type="button" name="name" value="新增一行" class="btnAddLine" v-on:click="addLine" /> <input type="button" name="name" value="新增一组" class="btnAddGroup" v-on:click="addGroup" /><input type="button" name="name" value="移除组" v-on:click="$emit(\'remove-group\',items.id)" v-if="items.id" /> </div> <div class="line" v-for="item of items.items" v-if="!item.relation"> <select> <option value="Id">编号</option> <option value="Name">姓名</option> <option value="Age">年龄</option> </select> <select> <option value="大于">大于</option> <option value="小于">小于</option> <option value="等于">等于</option> </select> <input type="type" name="name" value="" /> <input type="button" name="name" value="移除" class="btnRemoveLine" v-on:click="removeLine(item.id)" /> </div> <group v-bind:items="item" v-for="item of items.items" v-if="item.relation" v-on:remove-group="removeGroup"></group> </div>'
}); var app = new Vue({
el: "#app",
data: {
items: {
id: 0,
relation: "and",
items: [{
id: 1,
column: "Id",
local: "equal",
value: "1"
}, {
id: 2,
column: "Id",
local: "equal",
value: "1"
}, {
id: 3,
relation: "and",
items: [{
id: 4,
column: "Id",
local: "equal",
value: "1"
}]
}]
}
},
methods: {
getValue: function () {
console.log(this.items);
}
}
}); </script>
最终运行效果如下：
讲解：
1.经过分析，这个功能涉及到递归功能，于是我们拆分成了一个模块，一个查询组就定义成一个自定义组件group。
2.自定义组件通过props定义父组件向子组件传递的值
3.通过$emit触发当前组件的事件，并可以传递参数，当前组件的父级组件将绑定该事件
4.v-on用于绑定事件，v-for循环节点，v-if判断为true才输出节点
5.data不能是对象，只能是方法的返回，因为页面会引用多个组件，通过方法返回能确保数据的独立
6.关于在自定义组件的template中写入html代码看起来不友好的问题，可以在网上搜索“vue x-template”进行修改。
二、关于template
如上，组件中，template写了很多html代码，阅读起来很不方便，然后vue中提供了如下两种方式
方式一：
<script type="text/x-template" id="group-template">
<div>hello</div>
</script>
<script>
var component = Vue.component("group", {
template: '#group-template'
});
</script>
方式二：
<template id="group-template">
<div>hello</div>
</template>
<script>
var component = Vue.component("group", {
template: '#group-template'
});
</script>
使用vue实现自定义搜索功能的更多相关文章
- CI 结合 vue.js 的搜索功能模块
CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...
- vue自动完成搜索功能的数据请求处理
在现在的互联网世界里,自动完成的搜索功能是一个很常见的功能.比如百度.搜狗.360搜索 ... 功能描述一下大概是这个样子的:有一个搜索框,用户在里面输入要查询的条件,系统会“智能”判断用户输完了,然 ...
- 用vue实现百度搜索功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 夺命雷公狗---DEDECMS----33dedecms自定义搜索以及分页功能完成
我们现在要开始实现模版里面的搜索功能了,我们先找要做出一个检索提交表单,如下所示: 只要我们点击生成之后我们的表单就获取到了,可以直接拿生成好的html表单拿来用来测试下.. 将他嵌入首页的模版文件, ...
- vue 使用watch监听实现类似百度搜索功能
watch监听方法,watch可以监听多个变量,具体使用方法看代码: HTML: <!doctype html> <html lang="en"> < ...
- Vue下简单分页及搜索功能
最近利用Vue和element ui仿写了个小页面,记一哈分页和搜索功能的简单实现. 首页 emmmm..... 搜索框输入..... 搜索完成 数据是直接写在这里面的: cardPhoto:[ ...
- vue实现搜索功能
vue实现搜索功能 template 部分 <!-- 搜索页面 --> <template> <div> <div class="goback&qu ...
- 自定义SWT控件三之搜索功能下拉框
3.搜索功能下拉弹出框 package com.view.control.select; import java.util.ArrayList; import java.util.LinkedList ...
- PHP+mysql数据库开发搜索功能：中英文分词+全文检索（MySQL全文检索+中文分词（SCWS））
PHP+mysql数据库开发类似百度的搜索功能:中英文分词+全文检索 中文分词: a) robbe PHP中文分词扩展: http://www.boyunjian.com/v/softd/robb ...
随机推荐
- 2019-oo-第一次总结
一.度量分析程序结构 1.UML类图分析 1.1第一次作业 1.2第二次作业 1.3第三次作业 1.4总结 从UML类图三次作业的可以看出,我从一个类到逐渐利用多个类,代码结构在不 ...
- Python数据分析matplotlib可视化之绘图
Matplotlib是一个基于python的2D画图库,能够用python脚本方便的画出折线图,直方图,功率谱图,散点图等常用图表,而且语法简单. Python中通过matplotlib模块的pypl ...
- java多线程探究
本文主要是一些线程理论性的知识,随后将贴出研究的源码,包含线程池,锁,线程组等简单的demo,欢迎大家下载1.进程:每个进程都有独立的代码和数据空间(进程上下文),进程间的切换会有较大的开销,一个进程 ...
- 关于git的认证方式
之前对github的使用,形成了两种观点.就是有两种url的模式,一种是http或https的,另一种是git专属的.然后git专属的url方式可以配置公钥认证,http(s)的则需要输入密码. 近期 ...
- empty和isset区别
isset判断变量是否已存在(配置) unset把变量删除(释放)掉 empty 判断变量是否为空 is_null 判断变量是否为NULL is_null,我们可以把它看成是!isset,是isset ...
- CentOS 7 安装Apache 2.4.39
使用源码在CentOS 7下安装 apache 2.4.39,之前趟了一遍,简单做个笔记. STEP 1 安装apr STEP 1.1 检查是否安装apr [root@study ~]# yum li ...
- linux目录详细列表
详细列表 目录 说明 备注 bin 存放普通用户可执行的指令 即使在单用户模式下也能够执行处理 boot 开机引导目录 包括Linux内核文件与开机所需要的文件 dev 设备目录 所有的硬件设备及周边 ...
- OpenStack-Neutron-Fwaas-代码【二】
上一节从代码层面来讲解了fwaas的流程,这里通过具体查看iptables规则来说下应用规则的流程: 1.首先通过命令获取当前路由中的规则 #ip netns exec qrouter-[router ...
- asp.net core mvc 在中间件中使用依赖注入问题：System.InvalidOperationException: Cannot resolve scoped service 'IXXXService' from root provider.
今天在弄JWT的时候需要用到用户验证使用一个自己写好的验证,但在出现了:System.InvalidOperationException: Cannot resolve scoped service ...
- 设置webstorm自动删除行尾分号