（填坑）vue实现简单的增删改查和全选反选功能

没有技术含量的暴力版：

<template>
  <div class="container manage">
    <div>
      <ul class="clearFloat manage__title">
        <li>
          <label>id(添加或修改):</label>
          <input type="text" placeholder="请输入id" v-model="id" />
        </li>
        <li>
          <label>name(添加或修改):</label>
          <input type="text" placeholder="请输入name" v-model="name" />
        </li>
        <li>
          <button value="添加" @click="add()">添加</button>
        </li>
      </ul>
    </div>
    <div class="manage__content">
      <label>搜索：</label>
      <input type="text" placeholder="请输入name" v-model="keyword" />
      <input type="checkbox" name="items" class="all-choose" v-model="flag" @click="allchoose()" />
      <label>全选</label>
      <input type="button" name="items" value="反选" class="diff-choose" @click="rechoose()" />
      <ul v-for="item in search(keyword)" :key="item.id" class="clearFloat">
        <li>
          <input type="checkbox" name="items" v-model="item.isChecked" @click="choose(item.id)" />
          <span>{{item.id}} : {{item.name}}</span>
          <button value="删除" @click="del(item.id)">删除</button>
          <button value="编辑" @click="modify(item.id)">编辑</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      name: '',
      keyword: '',
      flag: false,
      reflag: false,
      items: [
        { id: '01', name: 'ming', isChecked: false },
        { id: '02', name: 'ming1', isChecked: false },
        { id: '03', name: 'ming2', isChecked: false },
        { id: '04', name: 'ming3', isChecked: false },
        { id: '05', name: 'ming4', isChecked: false }
      ]
    }
  },
  methods: {
    add() {
      if (this.items.findIndex(item => item.id === this.id) !== -1) {
        alert('do not add same id')
      } else {
        this.items.push({ id: this.id, name: this.name })
      }
    },
    search(keyword) {
      var arr = this.items.filter(item => {
        if (item.name.includes(keyword)) {
          return item
        }
      })
      return arr
    },
    del(id) {
      var index = this.items.findIndex(item => item.id === id)
      this.items.splice(index, 1)
    },
    modify(id) {
      var index = this.items.findIndex(item => item.id === id)
      this.items.splice(index, 1, { id: this.id, name: this.name })
    },
    allchoose() {
      var flag = this.flag
      flag = !flag
      console.log('父框ischecked' + '=' + flag)
      this.items.map(item => { item.isChecked = flag })
      this.items.map(item => { console.log(item.isChecked) })
    },
    rechoose() {
      this.items.map(item => { item.isChecked = !item.isChecked })
    },
    choose(id) {
      var index = this.items.findIndex(item => item.id === id)
      console.log('item=' + index)
      this.items[index].isChecked = !this.items[index].isChecked
      var isChecked = this.items[index].isChecked
      console.log('item.ischecked= ' + this.items[index].isChecked)
      if (isChecked === false) {
        this.flag = false
        console.log('flag=' + this.flag)
      } else if (this.items.findIndex(item => item.isChecked === false) === -1) {
        this.flag = true
      }
    }
  }
}
</script>

<style lang="less">
.manage {
  &__title {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    li {
      margin: 20px 10px;
    }
  }
  // &__content {
  //   ul {
  //     li {
  //     }
  //   }
  // }
}
button {
  height: 40px;
  width: 80px;
  font-size: 12px;
  color: black;
}
</style>