有关于Vue中增删改查功能的实现

因为马上要步入职场，所以自己在准备面试的同时，也想着手熟练一些常用功能的开发

第一个想到的就是后台管理系统，增删改查的功能

在这篇博客中记录一下自己在写项目demo的时候遇到的问题和解决办法，先上成图

Q1.在做表格的时候选择element-ui还是ul v-for 循环渲染li标签？

A:考虑到后续需要实现改信息和删信息的功能，我们需要用到v-for里的index，所以目前选择v-for

Q2.如何实现弹窗

A:可以考虑ele-ui中的弹窗组件，但是我在看了开发文档后发现要了解promise的知识，由于我目前使用promise较少，并且在后续的功能实现上有既定思路，并不清楚如何在promise当中使用。所以我采用在模板中写好弹窗内容，并用子绝父相的方法确定位置后，设置v-show，在后续点击按钮的时候更改其中参数的值，即可达到弹窗的效果。

Q3.想要共用一个弹窗页面，如何动态修改弹窗页面中的标题，添加/编辑呢？

A:

1.在参数中建立一个state参数，默认值为‘add‘

2.声明一个方法，openfn来打开弹窗，传入两个参数（type，v）在网页中添加和编辑按钮中

引用这个方法

{{ addbtn }}

// 添加按钮

{{ edit }}
// 编辑按钮

openfn(type,v){   
//通过传入type来判断是添加还是编辑 并将state参数修改为当前的type
      this.flag=true
      this.state=type
      if(type=='add'){
        this.ob={}
      }else{
        this.ob=JSON.parse(JSON.stringify(v))

   3.在相关位置上用三元运算符 判断state参数的内容 来动态更改 显示的是编辑还是添加

{{ state=='add' ? '添加':'编辑'}}
//弹窗标题部分 确认部分雷同

 

Q4.如何实现在点击编辑的时候 将已经有的数据拉取到弹窗中

A:

1.在数据中提前声明一个空对象，和我们既定数据对象拥有同样的属性

list: [                          //模拟既定数据
        {
          name: "小王",
          age: 5,
          sex: "男",
          id:1
        },
        {
          name: "小周",
          age: 4,
          sex: "男",
          id:20
        },
        {
          name: "小陈",
          age: 6,
          sex: "女",
          id:3
        },
      ],

      
ob: {                         //新建空对象模具
        name: "",
        age: "",
        sex: "",
        id:''
      },

2.在弹窗的input中的信息和新建空对象模具的属性进行v-model双向绑定

3.在打开弹窗的方法openfn（）中，在type=edit的情况 让空对象的值等于传入的v

{{ edit }}  //在这里将obj的信息传入v

openfn(type,v){   
      this.flag=true
      this.state=type
      if(type=='add'){
        this.ob={}
      }else{
        this.ob=JSON.parse(JSON.stringify(v))  //在这里将空数组的值变成传入参数v的值
      }
    },
//由于空数组的input框和ob的数据双向绑定 即可获取要修改的原信息

Q5.添加和删除功能的实现 

A:很简单 添加的话输入新加的信息之后 用数组的push方法就可以实时添加数据了

删除的话用数组的spilce方法 arr.splice（开始位置，删除数量）

Q6.如何修改数据 并在原数据的基础上更新

A:demo的难点之一，修改的功能要清楚如何修改到正确的位置，也就是更新原数据的哪一条？

思路如下: 关键点在于数据的唯一值 ：ID属性

1.用参数 i（数组值索引） 循环遍历原数组，判断在编辑框中的ob.ID和list.id是在i等于几的时候相等

2.让list[i] = ob 即可

    changefn(){
      if(this.state=='add'){
        let id = this.list.length > 0 ? Math.max(...this.list.map(a => a.id))+1 : 1  
//通过map方法遍历数组对象中的ID返回新数组 用扩展运算符后 获取最大值加一后为新的数据的ID
        this.list.push({...this.ob,id})
        this.flag=false
      }else{
        this.list.forEach((obj,i)=>{   //arr.forEach(obj,i) = > { A }用函数A 遍历arr中的数据 
          if(obj.id == this.ob.id){
            this.list[i]=this.ob
            this.flag=false
          }
        })
      }
    },

*对于新添加的信息，由于弹窗中没有编写ID的选项，所以需要在添加信息的相关方法中为期赋予唯一不重复的ID属性值，具体方法在上图中写道，这里用文字做下解释，还是蛮重要的

1.思路是取当前数组对象中的ID值最大值加一作为新数据的ID

2.取最大值用Math.max方法 如Math.max(1,10,2) //10

3.用map方法遍历数组 map方法可以根据命令返回一个新的数组 arr.map(a => a*)

(a为返回数组的数据，*a为获取a的方法）

4.最后用三元运算符 将数组变为max方法可接受的形式即可