使用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>
讲解：
使用vue实现自定义搜索功能

猜你喜欢
