使用vue實現自定義搜索功能

時間 2019-12-08

標籤使用 vue 實現自定義搜索功能简体版

原文原文鏈接

實現效果如：http://www.ligerui.com/demos/filter/filter.htmhtml

代碼：vue

<%@ 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>

最終運行效果以下：npm

講解：app

1.通過分析，這個功能涉及到遞歸功能，因而咱們拆分紅了一個模塊，一個查詢組就定義成一個自定義組件group。ui

2.自定義組件經過props定義父組件向子組件傳遞的值this

3.經過$emit觸發當前組件的事件，並能夠傳遞參數，當前組件的父級組件將綁定該事件spa

4.v-on用於綁定事件，v-for循環節點，v-if判斷爲true才輸出節點.net

5.data不能是對象，只能是方法的返回，由於頁面會引用多個組件，經過方法返回能確保數據的獨立code

6.關於在自定義組件的template中寫入html代碼看起來不友好的問題，能夠在網上搜索「vue x-template」進行修改。component

2、關於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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。