前端代码复习zy

<template>

    <div id="d1">

        <table style="width: 70%;">

            <thead>

                <tr>

                    <td><router-link to="add/">预约</router-link></td>

                    <td colspan="6">

                        <el-input v-model="ss" placeholder="请输入要搜索的预约人"></el-input>

                    </td>

                </tr>

            </thead>

            <tr>

                <td>接种单位</td>

                <td>预约人</td>

                <td>电话</td>

                <td>身份证</td>

                <td>生日</td>

                <td>性别</td>

                <td>操作</td>

            </tr>

            <tbody>

                <tr v-for="(item, i) in sousuo(ss)" :key="i">

                    <td>

                        {{ item.appoinit.unitname }}

                    </td>

                    <td>

                        {{ item.person }}

                    </td>

                    <td>

                        {{ item.phone }}

                    </td>

                    <td>

                        {{ item.ipcard }}

                    </td>

                    <td>

                        {{ item.birthday }}

                    </td>

                    <td>

                        {{ item.sex }}

                    </td>

                    <td>

                        <el-button type="danger" @click="delapp(item)">删除</el-button>

                    </td>

                </tr>

            </tbody>

        </table>

    </div>

</template>

<script>

import axios from 'axios';

export default {

    name:'zy',

    data() {

        return {

            applist: [],

            ss: ''

        }

    },

    created() {

        this.getapp()

    },

    methods: {

        getapp() {

            axios.get('http://127.0.0.1:8000/zy/').then((res) => {

                this.applist = res.data

                console.log(this.applist)

            })

        },

        delapp(item) {

            this.$confirm('是否删除').then(() => {

                axios.delete(item.url).then(() => {

                    this.getapp()

                })

            })

        },

        sousuo(ss){

            var sslisk = []

            this.applist.forEach(i => {

                if(i.person.indexOf(ss) != -1){

                    sslisk.push(i)

                }

            })

            return sslisk

        }

    }

}

</script>

<style scoped>

table {

    border: 1px black solid;

}

table tr {

    border: 1px black solid;

}

table td {

    border: 1px black solid;

}

#d1 {

    margin-left: 25%;

    text-align: center;

}</style>