增加和删除数据

<template>
  <div class="foods">
    <div v-for="item in foods" :key="item.name">
      <h3 class="title">{{ item.name }}</h3>
      <div v-for="subItem in item.content" :key="subItem" class="content">
        {{ subItem }}
        <div class="delete" @click="del(item, subItem)">x</div>
      </div>
      <div class="content-add" style="font-size:30px" @click="handleAdd(item)">
        +
      </div>
    </div>
    <Modal v-model="show" footer-hide :width="400" :closable="false">
      <div>
        <Form
          :model="formItem"
          :rules="ruleInline"
          :label-width="93"
          inline
          ref="form"
        >
          <FormItem label="食材" prop="name">
            <Input v-model="formItem.name" placeholder="请填写材料名"></Input>
          </FormItem>
        </Form>
        <div slot="footer" class="modal-btn">
          <Button @click="cancle">取消</Button>
          <Button type="primary" @click="add">添加</Button>
        </div>
      </div>
    </Modal>
    <Modal v-model="show2" footer-hide :width="300">
      <div>
        <div class="del">你是否要删除{{ currentsubItem }}</div>
        <Button type="primary" @click="handleDelete" long class="del-btn"
          >删除</Button
        >
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "foods",
  props: {
    foods: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      value: "",
      show: false,
      show2: false,
      formItem: {
        name: "",
      },
      ruleInline: {
        name: [
          {
            required: true,
            message: "请填写材料名",
            trigger: "blur",
          },
        ],
      },
      currentItem: {},
      currentsubItem: "",
    };
  },
  computed: {},
  watch: {},
  methods: {
    /**
     * 点击显示模态框，获取当前选中的对象
     * @date 2022-03-18
     * @param {object} item
     */
    handleAdd(item) {
      this.show = true;
      //获取当前选中的对象
      this.currentItem = item;
    },
    /**
     * 点击显示模态框，获取当前选中的对象，限制内容不能全部删除
     * @date 2022-03-18
     * @param {object} item
     * @param {string} subItem
     */
    del(item, subItem) {
      //获取当前对象
      this.currentItem = item;
      //判断数组元素是否只剩一个，如果剩一个，弹出警告框
      if (item.content.length == 1) {
        this.$Message.warning("不可全部删除！");
        //弹出警告框后，停止执行下面的功能
        return;
      }
      //获取当前项
      this.currentsubItem = subItem;
      //显示模态框
      this.show2 = true;
    },
    /**
     * 表单验证，表单验证通过后，添加一项数据，并且关掉模态框
     * @date 2022-03-18
     */
    add() {
      //表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 方法一：
          //定义一个变量等于当前获取的对象名
          // let name = this.currentItem.name;
          //遍历数组，通过name属性在数组中匹配到当前获取的对象，将输入的内容添加进去
          // this.foods.map((item) => {
          //   if (item.name == name) item.content.push(this.formItem.name);
          // });

          // 方法二：
          // 这里使用了指针指向变量地址，所以直接修改也可以
          this.currentItem.content.push(this.formItem.name);
          //关掉模态框
          this.show = false;
          //初始化表单数据
          this.initFormData();
        }
      });
    },
    /**
     * 关掉模态框并且初始化表单数据
     * @date 2022-03-18
     */
    cancle() {
      this.show = false;
      this.initFormData();
    },
    /**
     * 删除当前项
     * @date 2022-03-18
     */
    handleDelete() {
      //在数组中筛选当前项，过滤掉相同项，返回不同项
      this.currentItem.content = this.currentItem.content.filter(
        (item) => item !== this.currentsubItem
      );
      //关掉模态框
      this.show2 = false;
    },
    /**
     * 初始化表单数据
     * @date 2022-03-18
     */
    initFormData() {
      //清空数据
      Object.assign(this.formItem, {
        name: "",
      });
      //清空检验规则
      this.$refs.form.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.foods {
  padding: 20px 40px;
  // height: 828px;
  // overflow: auto;
  .title {
    font-size: 18px;
    font-family: PingFangSC-Medium;
    font-weight: 400;
    color: rgba(41, 41, 41, 1);
    line-height: 18px;
    text-align: left;
    margin: 5px 0 20px 5px;
  }
  .content {
    position: relative;
    width: 267px;
    height: 60px;
    background: rgba(247, 247, 247, 1);
    border-radius: 4px;
    line-height: 60px;
    text-align: center;
    font-size: 18px;
    color: rgba(102, 102, 102, 1);
    margin-right: 16px;
    display: inline-block;
    margin-bottom: 16px;
    &:hover {
      background: rgba(255, 192, 0, 1);
      color: rgba(51, 51, 51, 1);
      cursor: pointer;
    }
  }
}
.content-add {
  .foods.content;
}
form {
  margin-top: 30px;
}
.delete {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  &:hover {
    background-color: #ff0000;
  }
}
.del-btn {
  background-color: #ed4014;
  border: none;
}
.del {
  font-size: 18px;
  height: 100px;
  line-height: 90px;
  text-align: center;
}
.modal-btn {
  text-align: center;
  button {
    margin: 5px;
  }
}
</style>