使用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>
