vue中form表单点击一次添加一行和删除一行

vue中form表单点击一次添加一行和删除一行

1、效果图

2、代码

<template>
  <div class="container">
    <el-row v-for="(item, index) in ruleForms.items">
      <!--   :rules="rules" -->
      <el-form
        :inline="true"
        :model="ruleForms.items[index]"
        ref="ruleForms"
        label-width="100px"
        class="demo-form-inline"
        size="small"
      >
        <el-form-item label="使用时间" prop="date">
          <el-date-picker
            v-model="ruleForms.items[index].date"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format=" yyyy-MM-dd HH:mm"
            format="yyyy-MM-dd HH:mm"
            :default-time="['00:00:00']"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="属性" prop="app">
          <el-select
            v-model="ruleForms.items[index].app"
            placeholder="请选择属性"
            @change="getMaterial"
          >
            <el-option
              v-for="item in apps"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="大分类" prop="material" size="small">
          <el-select
            v-model="ruleForms.items[index].material"
            placeholder="请选择大分类"
          >
            <el-option
              v-for="item in materials"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="index != 0"
            type="danger"
            @click="del(index)"
            size="small"
            >删除</el-button
          >
          <el-button
            v-if="index == 0"
            type="success"
            @click="addItem"
            size="small"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      startTime: "",
      endTime: "",
      apps: [],
      materials: [],
      ruleForms: { items: [{}] },
    };
  },
  methods: {
    addItem() {
      // this.i += 1;
      this.ruleForms.items.push({
        date: "",
        material: "", //大分类
        app: "",
      });
      // console.log(this.i);
    },
    // 删除使用时间
    del(index) {
      this.ruleForms.items.splice(index, 1);
    },
    getMaterial() {
      console.log(123);
    },
  },
};
</script>
<style scoped lang="less">
</style>