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>
            <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input placeholder="请输入姓名" v-model="name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth">
            <el-input placeholder="请输入地址" v-model="address" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="pushs()">新 增</el-button>
            <el-button  @click="err()">取 消</el-button>
        </div>
        </el-dialog>


    
        <el-dialog title="修改" :visible.sync="el_xiu">
        <el-form>
            <el-form-item label="日期" :label-width="formLabelWidth">
            <el-input v-model="newtable.date" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input placeholder="请输入姓名" v-model="newtable.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth">
            <el-input placeholder="请输入地址" v-model="newtable.address" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="trueset()">修 改</el-button>
            <el-button  @click="xg_err()">取 消</el-button>
        </div>
        </el-dialog>
    
      
        
      

</el-row>   
</template>

<script>
  export default {
    data() {
      return {
        searchs:[],
        input:null,
        searchtableData: [  //搜索框初始数据
        {
          date: '2019-12-02',
          name: '长安',
          address: '长安归故里',
          id:0
        }, 
        {
          date: '2019-12-02',
          name: '故里',
          address: '故里归长安',
          id:1
        }, 
        {
          date: '2019-12-02',
          name: '百里',
          address: '尔来四万八千岁',
          id:2
        }, 
        {
          date: '2019-12-02',
          name: '秦汉',
          address: '不与秦塞通人烟',
          id:3
        },
        {
          date: '2019-12-02',
          name: '李白',
          address: '西当太白有鸟道',
          id:4
        }
        ],
        tableData: [
        {
          date: '2019-12-02',
          name: '长安',
          address: '长安归故里',
          id:0
        }, 
        {
          date: '2019-12-02',
          name: '故里',
          address: '故里归长安',
          id:1
        }, 
        {
          date: '2019-12-02',
          name: '百里',
          address: '尔来四万八千岁',
          id:2
        }, 
        {
          date: '2019-12-02',
          name: '秦汉',
          address: '不与秦塞通人烟',
          id:3
        },
        {
          date: '2019-12-02',
          name: '李白',
          address: '西当太白有鸟道',
          id:4
        }
        ],
        el_show:false,
        
        el_xiu:false,
        date:"",
        name:"",
        address:"",
        newtable:{
            date:"",
            name:"",
            address:"",
        },   //修改内容暂存区
        formLabelWidth: '120px',
        newid:0   //存储点击的id
      }
    },
    methods:{
    //搜索
        search:function(){
            console.log(this.input);
            this.tableData.map((item)=>{
                if(this.input==null||this.input==''){
                    // this.$message({  在循环中会直接弹出多个同样提示框（不可用）
                    //     message: '搜索内容不存在或搜索字段错误',
                    //     type: 'warning'
                    // });
                    this.tableData=this.searchtableData;
                    return;
                }else if(item.name.includes(this.input)){ // eslint-disable-line no-unused-vars
                    this.searchs=[]; //每次搜索前清空，否则会一直追加
                    this.searchs.push(item);
                    console.log(this.searchs);
                    this.tableData=this.searchs;
                    console.log(this.tableData);
                    return;
                }
            })
        },
        //新增让弹框显示
        adds:function(){
            this.el_show=true;
            
        },
        //取消让弹框隐藏
        err:function(){
            this.el_show=false;
        },
        //删除某条信息
        removes:function(v){
            console.log(v.id)
            this.newid=this.tableData.findIndex((item)=>{
              return item.id==v.id;
            })
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.tableData.splice(this.newid,1);  //删除代码
                this.searchtableData=this.tableData;  //绑定搜索框初始数据
                console.log(this.tableData)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },

        //新增
        pushs:function(){
            if(!this.date||!this.name||!this.address){
                this.$message.error('内容不能为空');
                return;
            }
            //使用map方法获取到id的最大值
            let ids = Math.max(...this.tableData.map(function(item){return item.id}))+1;
            this.tableData.push({
                    date:this.date,
                    name:this.name,
                    address:this.address,
                    id:ids
            })
            this.searchtableData=this.tableData;  //绑定搜索框初始数据
            this.$message({
                message: '创建成功',
                type: 'success'
            });
            this.date="",
            this.name="",
            this.address="",
            
            this.el_show=false;
        },

        //修改
        //弹出框 显示
        sets:function(val){
            this.el_xiu=true;
           
            console.log(val)
            this.newtable={
                date:val.date,
                name:val.name,
                address:val.address,
                id:val.id
            }
        },
        xg_err:function(){
            this.el_xiu=false;
        },
        //保存修改
        trueset:function(){
            console.log(this.newtable.date+"===")
            for(var i=0;i<this.tableData.length;i++){
                if(this.tableData[i].id==this.newtable.id){
                    this.tableData[i].date=this.newtable.date;
                    this.tableData[i].name=this.newtable.name;
                    this.tableData[i].address=this.newtable.address;
                    this.tableData[i].id=this.newtable.id;
                    this.el_xiu=false;
                }
            }
            this.searchtableData=this.tableData;  //绑定搜索框初始数据
        }
        

    }
  }
</script>
<style scoped>
    
</style>