ElementUI实现表格增删改查

之前在vue中实现表格增删改查，但是没有样式所以就比较丑，这次使用elementUI框架实现该功能界面样式进行优化，如果有需要的可以直接复制代码运行，前提全局安装elementUI这些 再次修改后增加搜索功能 搜索内容如果不存在或搜索信息错误列表不会变动（正常应该列表为空）因为没有后台数据，只是前端功能部分bug希望大佬们多多包涵（勿喷），主要是看看逻辑就好

 

<template>
 <el-row>
    <el-row>
        <el-col :span="3"><el-button type="success" @click="adds()">新增</el-button></el-col>
    </el-row>
    <el-row>
        <el-col :span="6"><el-input size="medium" v-model="input" placeholder="请输入姓名进行搜索"></el-input></el-col>
        <el-col :span="3"><el-button type="primary" @click="search()">搜索</el-button></el-col>
    </el-row>
    
    <el-table
    :data="tableData"
    stripe
    style="width: 100%">
        
        <el-table-column type="index" width="50">  
        </el-table-column>      <!-- 这个为序号 -->
        
        <el-table-column
        prop="date"
        label="日期"
        width="180">
        </el-table-column>
        <el-table-column
        prop="name"
        label="姓名"
        width="180">
        </el-table-column>
        <el-table-column
        prop="address"
        label="地址">
        </el-table-column>
        <el-table-column >
            <!-- 让弹框显示 -->
            <template slot-scope="scope">
                <el-button type="primary" @click="sets(scope.row)">修改</el-button>
                <el-button type="danger" @click="removes(scope.row)">删除</el-button>
            </template>
              
            
        </el-table-column>
    </el-table>



        <el-dialog title="新增" :visible.sync="el_show">
        <el-form>
            <el-form-item label="日期" :label-width="formLabelWidth">
            <el-input v-model="date" autocomplete="off"></el-input>
            </el-form-item>