vue案例系列---【vue脚手架实现表单和列表的添加、修改、删除功能】

components下创建组件:

父组件index.vue (引入子组件 注册调用  app.vue 引入注册调用index.vue)
子组件：form.vue和list.vue

index.vue 代码如下：

<template>
  <div>
    <!-- 7.点击出现 -->
    <button @click="addbtn">添加</button>
    <!-- 2.数据列表组件 -->
    <!-- 11.传递arr给list -->
    <!-- 21.绑定show事件 -->
    <!-- 30.绑定del  -->
    <v-list :arr="arr" @show="edit" @del="del($event)"></v-list>

    <!-- 3.表单组件 -->
    <!-- 6.条件渲染 -->
    <!-- 9.绑定自定义事件hide -->
    <!-- 16.绑定自定义事件add -->
    <!-- 19.绑定ref -->
    <!-- 25.info传给form,form根据isAdd来确定是“添加”还是"修改" -->
    <!-- 26.绑定update -->
    <v-form
      v-show="info.isshow"
      @hide="info.isshow=false"
      @add="add"
      ref="form"
      :info="info"
      @update="update"
    ></v-form>
  </div>
</template>

<script>
// 4.list.vue form.vue 实现静态页面
import vList from "./list";
import vForm from "./form";
export default {
  components: {
    vList,
    vForm,
  },
  data() {
    return {
      //   5.初始化变量
      //   22.由于添加和修改都开弹框，所以加isAdd字段表示是添加还是修改
      info: {
        isshow: false,
        //判断是添加的弹框还是修改的弹框，如果是添加开的弹框，isAdd=true,修改开的弹框，isAdd=false
        isAdd: true,
      },
      // 添加
      //10.初始化数据
      arr: [
        { id: 1, title: "22", con: "qq" },
        { id: 2, title: "33", con: "qq" },
      ],
    };
  },
  methods: {
    //   17.添加
    add(user) {
      this.arr.push({
        id: new Date().getTime(),
        ...user,
        // title:user.title,
        // con:user.con
      });

      //弹框消失
      this.info.isshow = false;
      //20.form的user要清空
      this.$refs.form.empty();
    },
    //23.添加按钮
    addbtn() {
      this.info = {
        isshow: true,
        isAdd: true,
      };
    },
    //24.编辑
    edit(index) {
      //弹框出现
      this.info = {
        isshow: true,
        isAdd: false,
      };

      //多传了1个id,但是一会儿修改的时候需要id来判断修改哪条，所以需要
      this.$refs.form.user = { ...this.arr[index] };
    },
    //27.更新
    update(user) {
      // 查出arr中哪条数据的id和user的id是一样的，要这条数据的下标
      // findIndex返回满足条件的数据的下标，不存在，返回-1
      // find返回满足条件的那条数据，不存子啊，返回undefined
      let index = this.arr.findIndex((item) => item.id == user.id);
      //修改
      this.arr.splice(index, 1, { ...user });

      //弹框消失
      this.info.isshow = false;
      //form的user要清空
      this.$refs.form.empty();
    },
    // 32.删除
    del(id){
        let index=this.arr.findIndex(item=>item.id==id)
        this.arr.splice(index,1)
    }
  },
};
</script>

<style>
</style>

form.vue代码如下：

<template>
  <div class="mask" @click.self="cancel">
    <div class="con">
      <h3>{{info.isAdd?'添加':'修改'}}</h3>
      {{user}}
      <div>
        标题：
        <input type="text" v-model="user.title" />
      </div>
      <div>
        内容：
        <input type="text" v-model="user.con" />
      </div>
      <div>
        <button @click="add" v-if="info.isAdd">添加</button>
        <button v-else @click="update">修改</button>
        <button @click="cancel">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["info"],
  data() {
    return {
      // 14.初始化input的值
      user: {
        title: "",
        con: "",
      },
    };
  },
  methods: {
    // 8.取消弹框
    cancel() {
      //28.添加的取消，不动user
      // 修改的取消，user要清空
      if(!this.info.isAdd){
          this.empty()
      }

      this.$emit("hide");
    },
    //15.添加逻辑
    add() {
      //通知父组件添加
      this.$emit("add", this.user);
    },
    // 18.清空数据
    empty() {
      this.user = {
        title: "",
        con: "",
      };
    },
    //25.修改
    update() {
      //通知父组件做修改
      this.$emit("update", this.user);
    },
  },
};
</script>

<style scoped>
.mask {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
}
.con {
  background: #fff;
  width: 280px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>

list.vue代码如下：

<template>
  <div>
    <!-- 绘制静态页面 -->
    <table border="1" width="800">
      <tr>
        <th>序号</th>
        <th>标题</th>
        <th>内容</th>
        <th>操作</th>
      </tr>
      <!-- 13.遍历arr -->
      <tr v-for="(item,index) in arr" :key="item.id">
        <td>{{index+1}}</td>
        <td>{{item.title}}</td>
        <td>{{item.con}}</td>
        <td>
          <button @click="edit(index)">修改</button>
          <button @click="del(item.id)">删除</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  // 12.收arr
  props: ["arr"],
  methods:{
      //21.修改
      edit(index){
          this.$emit("show",index)
      },
      //29.删除
      del(id){
          this.$emit("del",id)
      }
  }
};
</script>

<style>
</style>

app.vue代码如下：

<template>
  <div>
    <!-- 1.作业 创建index组件，然后引入 注册 调用 -->
      <!-- <v-index></v-index> -->

      <!-- 2.缓存组件 -->
      <v-keep></v-keep>
  </div>
</template>

<script>
import vIndex from "./components/index"
import vKeep from "./keep/index"
export default {
  components:{
    vIndex,
    vKeep
  }
}
</script>

<style>

</style>

实现效果：