实操一道vue题目（对数据的增删改查）

在今年初，我去赴约boss上的公司面试，好家伙，啥也没问，简历也没要，直接把我领到台式机面前，上机直接实操一道vue题目。大神请直接绕开，哈哈哈。

考察点——数据的增删改查。

需求如图：

1. 数据循环（布局、样式这些就略过）

用 for 把 数据 userData 循环出来

userData: [
        { userId: '2020101', userName: '吴三凡', userAge: 35, userLevel: 5 },
        { userId: '2020102', userName: '李四诲', userAge: 28, userLevel: 2 },
        { userId: '2020103', userName: '王五州', userAge: 42, userLevel: 6 }
      ]

2. 数据展示（点击修改button按钮，修改框显示，否则收起）

在前面数据循环，页面并没有修改框，是因为我通过设置了样式的高度为 0；

当它有高度样式类名 isShow 的时候，样式高度为70px，修改框才显示出来。

.userListItemEdit {
  display: flex;
  align-items: center;
  height: 0px;
  justify-content: space-evenly;
  overflow: hidden;
}
.userListItemEdit.isShow {
  height: 70px;
  border-bottom: 1px solid #e9e9e9;
}

这里的思路是，点击当行的数据的修改按钮，就添加 clsss类名 isShow

更正：把 index 传过去，拿到它的下标值，并让我自己设置的idx 相对比，如果 idx === index 就展开修改框。

3. 修改框数据赋值

先把数据赋值给修改框的数据，但是这里不能用原始数据 userData 来赋值，因为这会造成没有点击修改按钮，就同时修改了数据，这个修改按钮就形同虚设，不符合需求。如图：

解决：复制一份 数据 userData 的那一项数据

注意：要用深拷贝，因为 userData 的 item 是对象，如果是浅拷贝，那么他们修改的是同一份数据，还是会造成修改按钮就形同虚设，不符合需求。

4. 数据展示（点击修改button按钮，数据修改，并收起修改框）

5. 删除

6. 搜索

这里用到 computed 对数据data 的 userData 和 searchInput 进行依赖处理； 高阶函数 filter 过滤，以及 方法 includes 包含

最后在这里附上源码：

<template>
  <div class="home">
    <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="searchInput">
    </el-input>
      <div class="list" id="userList">
        <div class="userListItem" v-for="(item, index) of restData" :key="item.userId">
          <div class="userListItemDesc">
            <div class="info">Id:{{item.userId}}</div>
            <div class="info">{{item.userName}}</div>
            <div class="btnGroun">
              <el-button size="mini" icon="el-icon-edit" @click="editBtn(index, item)" circle></el-button>
              <el-button size="mini" icon="el-icon-delete" @click="deleteBtn(index)" circle></el-button>
            </div>
          </div>
          <div class="userListItemEdit" :class="{'isShow': idx === index}">
            <label> 姓名：<input type="text" v-model="listDate.userName" /> </label>
            <label> 年龄：<input type="text" v-model="listDate.userAge" /> </label>
            <label> 级别：<input type="text" v-model="listDate.userLevel" /> </label>
            <el-button size="mini" round @click="save(item)">修改</el-button>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      idx: -1,
      searchInput: '',
      userData: [
        { userId: '2020101', userName: '吴三凡', userAge: 35, userLevel: 5 },
        { userId: '2020102', userName: '李四诲', userAge: 28, userLevel: 2 },
        { userId: '2020103', userName: '王五州', userAge: 42, userLevel: 6 }
      ],
      listDate: {}
    }
  },
  computed: {
    restData () {
      return this.userData.filter(item => {
        if (!this.searchInput) return item
        return item.userName.includes(this.searchInput) || item.userId.includes(this.searchInput)
      })
    }
  },
  methods: {
    editBtn (index, item) {
      if (this.idx === index) {
        this.idx = -1
        return false
      }
      this.idx = index
      this.listDate = JSON.parse(JSON.stringify(item))
    },
    save (item) {
      // item.userName = this.listDate.userName
      // item.userAge = this.listDate.userAge
      // item.userLevel = this.listDate.userLevel

      Object.assign(item, this.listDate)

      this.idx = -1
    },
    deleteBtn (index) {
      this.userData.splice(index, 1)
    }
  }
}
</script>
<style lang="scss">
html,
body,
input,
a {
  margin: 0;
  padding: 0;
}
input {
  outline: none;
}
.home {
  box-sizing: border-box;
  padding: 0 20px;
}
.el-input {
  width: 350px;
  margin: 20px 10px;
}
.list {
  margin-top: 10px;
  border-top: 1px solid #e0e0e0;
}
.userListItem {
  box-sizing: border-box;
}
.userListItemDesc {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 50px;
  border-bottom: 1px solid #e9e9e9;
}
.userListItemDesc .info {
  margin-right: 10px;
  text-transform: uppercase;
}
.userListItemDesc .btnGroun {
  margin-left: auto;
}
.userListItemEdit {
  display: flex;
  align-items: center;
  height: 0px;
  justify-content: space-evenly;
  overflow: hidden;
}
.userListItemEdit.isShow {
  height: 70px;
  border-bottom: 1px solid #e9e9e9;
}
.userListItemEdit input {
  padding: 5px 0;
  border-radius: 20px;
  border: 1px solid #e0e0e0;
  padding-left: 10px;
  box-sizing: border-box;
}
.userListItemEdit .btnOutline {
  border: 1px solid #008acd;
  padding: 5px 10px;
  background: #fff;
  border-radius: 20px;
}
</style>

这份题，从一开始的思路，再到中途的错误，最后到解决，以上就是我整个做题思路的分享——对数据的增删改查。

哈哈哈，今天是美好且快乐的一天。