vue +element +el-select +input 点击加号添加一行

**

vue +element +el-select +input 点击加号添加一行

**

直接上代码。

 <div class="details">
            <div
              class="detailsblcok"
              v-for="(v, index) in detailslist"
              :key="index"
            >
              <!-- 用户 -->
              <el-select
                v-model="v.detailsvalue"
                placeholder="请选择"
                class="select"
              >
                <el-option
                  v-for="item in detailsoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <!-- 等于 -->
              <el-select
                v-model="v.Rulevalue"
                placeholder="请选择"
                class="select"
              >
                <el-option
                  v-for="item in Ruloptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <!-- <input type="text"> -->
              <el-input
                class="input_style"
                v-model="v.input"
                placeholder="请输入内容"
              ></el-input>
              <!-- 关系 -->
              <el-select
                v-model="v.input_stylevalue"
                placeholder="请选择"
                class="select"
              >
                <el-option
                  v-for="item in input_styleoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <!-- 删除一行-->
              <el-button
                plain
                type="danger"
                class="btn"
                icon="el-icon-minus"
                @click="deleteItem(index)"
                v-if="index !== 0"
              ></el-button>
              <!-- 添加一行 -->
              <el-button
                class="btn"
                type="primary"
                plain
                icon="el-icon-plus"
                @click="Addrule"
              ></el-button>
            </div>
          </div>

以上是html代码
下面是data代码

 detailslist: [
        { detailsvalue: "", Rulevalue: "", input: "", input_stylevalue: "" },
      ],
      detailsoptions: [
        {
          value: "xxx",
          table: "选项1",
        },
        {
          value: "xxx",
          table: "选项2",
        },
        {
          value: "xx",
          table: "选项3",
        },
        {
          value: "xxx",
          table: "选项4",
        },
        {
          value: "xxx",
          table: "选项5",
        },
        {
          value: "xxx",
          table: "选项6",
        },
        {
          value: "xxx",
          table: "选项7",
        },
      ],
      Ruloptions: [
        {
          value: "xxx",
          table: "选项1",
        },
        {
          value: "xxx",
          table: "选项2",
        },
        {
          value: "xx",
          table: "选项3",
        },
        {
          value: "xxx",
          table: "选项4",
        },
        {
          value: "xx",
          table: "选项5",
        },
      ],
      input_styleoptions: [
        {
          value: "xxx",
          table: "选项1",
        },
        {
          value: "xxx",
          table: "选项2",
        },
      ],
      input: "",
    };

简单的js逻辑

Addrule() {
      this.detailslist.push({
        detailsvalue: "",
        Rulevalue: "",
        input: "",
        input_stylevalue: "",
      });
    },
    deleteItem(index) {
      this.detailslist.splice(index, 1);
    },

以上是自己写的，有不足之处 原因大神来指导。谢谢大家！
我是一个前端小菜鸟。。。