【ant Design vue 】点击按钮增加或删除一行

 

<template>
  <div>
    <a-form-item label="增加整行">
      <div v-for="(item, index) in descs" :key="index" style="display: flex">
        <div style="display: flex; margin: 10px">
          <span>任务名称：</span>
          <a-card hoverable style="width: 240px; height: 100px">
            <a-input
              v-model="item.key"
              placeholder="任务名称"
              style="width: 200px; marginleft: 50px"
            />
          </a-card>
        </div>
        <div style="display: flex; margin: 10px">
          <span>任务类型：</span>
          <a-card hoverable style="width: 240px; height: 100px">
            <a-input
              v-model="item.value"
              placeholder="任务类型"
              style="width: 200px"
            />
          </a-card>
        </div>

        <a-icon
          type="plus-circle"
          style="margin-left: 22px; font-size: 25px"
          @click="adddesc"
        />
        <a-icon
          type="minus-circle"
          style="margin-left: 11px; font-size: 25px"
          @click="deldesc(index)"
        />
      </div>
    </a-form-item>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      descs: [{ key: "", value: "" }],
      newList: [],
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    //增加
    adddesc() {
      console.log(123, this.descs);
      this.descs.push({ key: "", value: "" });
    },
    //删除
    deldesc(index) {
      if (this.descs.length >= 1) {
        this.descs.splice(index, 1);
      }
    },
  },
};
</script>

<style scoped lang="scss">
</style>