vue 动态表单拿来就用

最新推荐文章于 2024-09-12 16:47:54 发布

kevin&1990

最新推荐文章于 2024-09-12 16:47:54 发布

阅读量224

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42396196/article/details/108854666

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

      
            <el-form-item label="替换" prop="values">
              <div
                v-for="(item, index) in AddForm.replaceList"
                :key="index"
                style="display: flex; margin-bottom: 20px"
              >
                <el-form-item
                  label=""
                  :prop="`replaceList.${index}.before_replace`"
                  :rules="rules.before_replace"
                  class="inline"
                  style="margin-right: 20px"
                >
                  <el-input
                    v-model="item.before_replace"
                    placeholder="请输入替换前"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label=""
                  :prop="`replaceList.${index}.after_replace`"
                  :rules="rules.after_replace"
                  class="inline"
                >
                  <el-input
                    v-model="item.after_replace"
                    placeholder="请输入替换后"
                  ></el-input>
                </el-form-item>
                <el-button
                  class="inline"
                  v-if="index == 0"
                  type="text"
                  icon="el-icon-plus"
                  @click="addRow"
                  >新增</el-button
                >
                <el-button
                  v-if="index > 0"
                  style="color: #f66"
                  type="text"
                  class="inline"
                  icon="el-icon-minus"
                  @click="deleteRow(index)"
                  >删除</el-button
                >
              </div>
            </el-form-item>

//data
  AddForm: {
       
        replaceList: [
          {
            before_replace: "",
            after_replace: "",
          },
        ],
      },

  //添加
    addRow() {
      this.AddForm.replaceList.push({
        before_replace: "",
        after_replace: "",
      });
    },
    //删除
    deleteRow(index) {
      this.AddForm.replaceList.splice(index, 1);
    },