表格 新增、编辑、删除

1、新增

2、编辑

3、删除

1、弹框部分

1.1 这一段是就是 ,就是你执行按钮操作之前出现的提示信息 , 就是相当于询问你是否确定这样做

记住关键字this.$confirm

this.$confirm('确认进行添加','是否继续?','提示',{
    confirmButtonText:'确定',
    confirmButtonText:'取消',
}

1.2 下面这一段是操作完成之后的提示信息 ; 提示你是执行成功了还是没有

记住关键字this.$message

this.$message({
    type: 'success',
    message:'添加成功',
})

1.3 这是编辑的弹框部分

<el-dialog title="编辑" :visible.sync="dialogFormVisible" width="30%" :before-close="handleClose" append-to-body="true">
    <!--这就是一个表格-->
    <el-form :model="form" >
        <!--公司ID-->
        <el-form-item label="公司ID">
            <el-input v-model="form.id" autocomplete="off"></el-input>
        </el-form-item>
        <!--公司名称-->
        <el-form-item label="公司名称">
            <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <!--公司地址-->
        <el-form-item label="公司地址">
            <el-input v-model="form.adress" autocomplete="off"></el-input>
        </el-form-item>
    </el-form>

    <!--确定, 取消  按钮-->
    <div>
        <el-button type="primary" @click.native.prevent="editSubForm" :loading="addLoading">确定</el-button>
        <el-button @click.native.prevent="dialogFormVisible=false">取消</el-button>
    </div>
</el-dialog>

2、方法执行流程

adddetail:function(){
	最开始执行的部分 ,
	一般书写this.$confirm
	以及你要执行的函数功能!
   
    }).then(()=>{
       接下来执行的部分
       一般书写的this.$message
       也就是执行是否成功的提示信息!
        })
    }).catch((err)=>{
       这是出错时候需要执行的部分
       一般也是取消执行出现的弹窗信息   
        })
    })

},

！3、增加数据的实现过程 解读

这段代表向newList这个数组中添加元素

newList是我们写死的数据 , addDetail是我们定义的一个空数组 , 然后输入的ID对应于ID ,其余同理 , 添加到写死的数组中, 这样数据就展示出来了 ;

（newList 相当于 装着整个列表，addDetail 相当于 装着一行数据）

this.newsList.push({
    id:this.addDetail.id,
    name:this.addDetail.name,
    adress:this.addDetail.adress,
}),

！4、删除数据的实现过程 解读

只用一行代码，就实现了删除 ，即 this.newsList.splice(index,1)

index 代表的是 当前位置所处的索引 , 1  代表删除一条数据 ,合起来也就是 删除一条数据

splice 是删除数组元素的方法 ;

！5、编辑数据的实现过程 解读

方法一：点击单元格（行），直接编辑：

可以使用element表格中行的点击事件(cell-click)，这个事件能拿到对应的row，之后在行的点击事件方法里调用编辑行的方法 （this.showUpdate(row.xh - 1, row)） 即可

方法二：弹窗编辑：

首先当你点击编辑按钮的时候 , 会弹出一个弹框 , 获取的是当前你点击按钮的那行数据并进行展示 , 你可以对他进行修改 , 然后点击保存数据数据就会发生改变

所以我们必须先进行一个绑定一个点击事件 , 当你点击编辑按钮的时候弹框就出现

这里边有一个属性 :visible.sync=“dialogFormVisible” 我们对其进行赋值为false 意思是平常不显示 ,

当触发修改的点击事件的石头 , 我们就将这个变量变为true 意思是显示出来

<el-dialog title="编辑" :visible.sync="dialogFormVisible" width="30%" :before-close="handleClose" append-to-body="true">

！修改：首先我们根据索引 , 获取当前的这条数据 

this.form=JSON.parse(JSON.stringify(this.newsList))[index];可以理解为用来拷贝数据的

editdetail:function (index,rows) {
    
   this.dialogFormVisible=true
   this.selected=index;
   this.form=JSON.parse(JSON.stringify(this.newsList))[index];

},

保存修改的方法

Vue.set(this.newsList,this.selected,this.form); 这个是用来赋值用的

this.getShowData(this.newsList); 这个是我们书写的一个展示数据的方法

this.dialogFormVisible=false; 再次让弹窗进行隐藏

editSubForm:function(){
   Vue.set(this.newsList,this.selected,this.form);
   this.getShowData(this.newsList);
   this.dialogFormVisible=false;
},

展示数据的方法

/*获取需要渲染到页面中的数据*/
getShowData:function (arr) {
    this.clonenewsList=JSON.parse(JSON.stringify(arr));
},

6、查询数据的解读过程

查询完成以后 展示数据即可

对需要进行查询的数据书写一个自己自定义的查询条件

searchFn:function (e) {
var key=e.target.value;

/*查询公司ID*/
if(key){
    var serchArray=[];
    this.newsList.forEach(function (item) {
        if(item.id.indexOf(key)>-1){
            serchArray.push(item);
        }

        /*name查询*/
        if(item.name.indexOf(key)>-1){
            serchArray.push(item);
        }
        /*地址查询*/
        if(item.adress.indexOf(key)>-1){
            serchArray.push(item);
        }

    });
    this.getShowData1(serchArray);
}else{
    this.getShowData1(this.newsList);
}
}