vue3,elementPlus和自己封装,点击 新增添加表单,删除表单,提交数据

这篇具有很好参考价值的文章主要介绍了vue3,elementPlus和自己封装,点击 新增添加表单,删除表单,提交数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

ElementPlus下的form也有新增表单 如果你写H5等没找到合适的 自己也可以进行封装

实现3个代码讲解:1:ElementPlus的代码 2:自己书写的代码 3:自己把2的代码进行封装

1:ElementPlus的运行效果


vue3,elementPlus和自己封装,点击 新增添加表单,删除表单,提交数据,vue.js,javascript,前端

点击提交

vue3,elementPlus和自己封装,点击 新增添加表单,删除表单,提交数据,vue.js,javascript,前端

1:ElementPlus的代码



  <template>
  <el-form
    ref="formRef"
    :model="dynamicValidateForm"
    label-width="120px"
    class="demo-dynamic"
  >
    <el-form-item
      prop="email"
      label="Email"
      :rules="[
        {
          required: true,
          message: 'Please input email address',
          trigger: 'blur',
        },
        {
          type: 'email',
          message: 'Please input correct email address',
          trigger: ['blur', 'change'],
        },
      ]"
    >
      <el-input v-model="dynamicValidateForm.email" />
    </el-form-item>
    <el-form-item
      v-for="(domain, index) in dynamicValidateForm.domains"
      :key="domain.key"
      :label="'Domain' + index"
      :prop="'domains.' + index + '.value'"
      :rules="{
        required: true,
        message: 'domain can not be null',
        trigger: 'blur',
      }"
    >
      <el-input v-model="domain.value" />
      <el-button class="mt-2" @click.prevent="removeDomain(domain)"
        >Delete</el-button
      >
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(formRef)">提交</el-button>
      <el-button @click="addDomain">新增</el-button>
      <el-button @click="resetForm(formRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";

const formRef = ref<FormInstance>();
const dynamicValidateForm = reactive<{
  domains: DomainItem[];
  email: string;
}>({
  domains: [
    {
      key: 1,
      value: "",
    },
  ],
  email: "",
});

interface DomainItem {
  key: number;
  value: string;
}

const removeDomain = (item: DomainItem) => {
  const index = dynamicValidateForm.domains.indexOf(item);
  if (index !== -1) {
    dynamicValidateForm.domains.splice(index, 1);
  }
};

const addDomain = () => {
  dynamicValidateForm.domains.push({
    key: Date.now(),
    value: "",
  });
};

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");
      console.log(dynamicValidateForm, "dynamicValidateForm");
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>  

2:自己书写的代码

vue3,elementPlus和自己封装,点击 新增添加表单,删除表单,提交数据,vue.js,javascript,前端
点击提交的打印效果
vue3,elementPlus和自己封装,点击 新增添加表单,删除表单,提交数据,vue.js,javascript,前端

 <template>
  <div class="box">
    <template v-for="(item, index) in dataForm" :key="item.id">
      <div
        class="box-b bg-ff"
        style="display: flex; justify-content: space-between"
      >
        <div>
          <div style="display: flex">
            <div class="">区域位置</div>
            <input v-model="item.ipchange" type="text" />
          </div>
          <div style="display: flex; margin-top: 10px">
            <div class="">危险有害因素</div>
            <input type="text" v-model="item.errorText" />
          </div>
        </div>
        <div>
          <el-button type="primary" @click="deleteClick(item.id)"
            >删除</el-button
          >
        </div>
      </div>
    </template>

    <div>
      <el-button type="primary" @click="handlerClick">新增</el-button>
      <el-button type="primary" @click="subMitClick">提交</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
const dataForm = reactive([
  { id: 1, ipchange: "", errorText: "" },
  { id: 2, ipchange: "", errorText: "" },
]);
const handlerClick = () => {
  dataForm.push({ id: Date.now(), ipchange: "", errorText: "" });
};
const deleteClick = (id: number) => {
  dataForm.forEach((item, index) => {
    item.id == id ? dataForm.splice(index, 1) : "";
  });
};
const subMitClick = () => {
  console.log(dataForm, "dataForm");
};
</script>

<style scoped>
.bg-ff {
  background: #fff;
}
.box {
  width: 30vw;
  margin: auto;

  background: #fff;
}
.box-b {
  padding: 10px;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #000;
  margin-top: 10px;
}
</style>
 

2的代码量太多 我们都会进行封装

3:自己把2的代码进行封装

components/insertForm.vue

<template>
  <div>
    <template v-for="(item, index) in NewdataForm" :key="item.id">
      <div
        class="box-b bg-ff"
        style="display: flex; justify-content: space-between"
      >
        <div>
          <div style="display: flex">
            <div class="">区域位置</div>
            <input v-model="item.ipchange" type="text" />
          </div>
          <div style="display: flex; margin-top: 10px">
            <div class="">危险有害因素</div>
            <input type="text" v-model="item.errorText" />
          </div>
        </div>
        <div>
          <el-button type="primary" @click="deleteClick(item.id)"
            >删除</el-button
          >
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
const emit = defineEmits(["deleteClick"]);
const define = withDefaults(defineProps<{ dataForm: any[] }>(), {
  dataForm: () => [
    { id: 1, ipchange: "", errorText: "" },
    { id: 2, ipchange: "", errorText: "" },
  ],
});

//1: 这样不可以的; 下面的watch监听进行赋值的时候 NewdataForm=newvalue不可整体的赋值这个
// reactive  只能赋值到它下的某个属性下
//1: let errors = reactive( [...define.dataForm] );
// 2:但是使用这个 太麻烦
// 2:let NewdataForm = reactive({ dataForm: [...define.dataForm] });
// 3:使用 ref这个 可以直接赋值
let NewdataForm = ref([...define.dataForm]);

watch(define.dataForm, (newvalue) => {
  // errors=newvalue  //错误的写法 如上1:
  // NewdataForm.dataForm=newvalue;可以正常运行如上2:

  NewdataForm.value = newvalue;
});
const deleteClick = (id: number) => {
  emit("deleteClick", id);
};
defineExpose({ NewdataForm });
</script>

<style scoped>
</style>

主文件引入

  <template>
  <div class="box">
    <div>
      <insertForm
        ref="insertFormRef"
        :dataForm="dataForm"
        @deleteClick="deletenewClick"
      ></insertForm>
      <el-button type="primary" @click="handlerClick">新增</el-button>
      <el-button type="primary" @click="subMitClick">提交</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import insertForm from "@/components/insertForm/index.vue";

import { ref, reactive } from "vue";
const insertFormRef = ref<InstanceType<typeof insertForm>>();
var dataForm = ref([
  { id: 1, ipchange: "", errorText: "" },
  { id: 2, ipchange: "", errorText: "" },
]);
const handlerClick = () => {
  dataForm.value.push({ id: Date.now(), ipchange: "", errorText: "" });
};
const deletenewClick = (id: number) => {
  dataForm.value.forEach((item, index) => {
    item.id == id ? dataForm.value.splice(index, 1) : "";
  });
};
const subMitClick = () => {
  dataForm.value = insertFormRef.value.NewdataForm;
  console.log(dataForm.value, "dataForm");
};
</script>

<style >
.bg-ff {
  background: #fff;
}
.box {
  width: 30vw;
  margin: auto;

  background: #fff;
}
.box-b {
  padding: 10px;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #000;
  margin-top: 10px;
}
</style>
 



 

效果一样
vue3,elementPlus和自己封装,点击 新增添加表单,删除表单,提交数据,vue.js,javascript,前端

vue3,elementPlus和自己封装,点击 新增添加表单,删除表单,提交数据,vue.js,javascript,前端
*文章来源地址https://www.toymoban.com/news/detail-561783.html

大多数人的疑问 我新增的input的vmodel绑定的值 和之前的表单一样的 ,都是ipchange: “”, errorText: “” 就是这样的 发给后端后端自己判断即可

到了这里,关于vue3,elementPlus和自己封装,点击 新增添加表单,删除表单,提交数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3+elementplus点击按钮使用el-image-viewer图片预览组件

    1.首先确保你是全局引入,不是全局的需要自主引入该组件 2..vue文件中定义组件 3. showsrcListref:[\\\'\\\']格式 4.点击按钮给showsrcListref赋值即可完成,同时将showImagePreview置为true

    2024年01月18日
    浏览(63)
  • vue3+elementplus基于el-table-v2封装公用table组件

    主要是针对表格进行封装,不包括查询表单和操作按钮。 梳理出系统中通用表格的功能项,即表格主体的所有功能,生成columns列头数据、生成data表体数据、拖拉列宽、分页、生成中文列名、自定义列宽width 效果如下: 父级引用: 父组件: 子组件: 子组件: 父组件: 以上

    2024年02月10日
    浏览(59)
  • vue3组件封装系列-表单请求

    我们在开发一些后台管理系统时,总是会写很多的列表查询页面,如果不封装组件,就会无限的复制粘贴,而且页面很冗余,正常情况下,我们都是要把组件进行二次封装,来达到我们想要效果。这里我分享一下我近期封装的关于列表的组件封装。 vue3+element-plus srccomponents

    2024年04月23日
    浏览(30)
  • axios 实战进阶练习( axios 封装篇)——基于 Vue3 + Node.js + ElementPlus 实现的联系人列表管理后台的 axios 封装实战

    在之前的文章 axios 实战进阶练习——基于 Vue3 + Node.js + ElementPlus 实现的联系人列表管理后台 中,我们完成了这个 基于 Vue3 + Node.js + ElementPlus 实现的联系人列表管理后台 的项目,其中项目的后端接口是用 Node.js 编写的,通过 axios 来获取接口,所以这篇文章我们来对这个 axi

    2024年02月11日
    浏览(91)
  • Vue3在点击菜单切换路由时,将ElementPlus UI库中el-main组件的内容滚动恢复到顶部

    功能:Vue3在点击菜单切换路由时,将页面el-main的内容滚动到顶部,布局如下,使用UI组件库为ElementPlus  在网上搜很多都是在route.js中的router.beforeEach中使用window.scrollTop(0,0) 或 window.scrollTo(0,0) 滚动,但是我使用无效,于是使用操作dom的方法,如下 可以使用 watch 函数来  监听

    2024年01月18日
    浏览(55)
  • Vue3中搜索表单的二次封装

    最近使用Vue3+ElementPlus开发项目,从整体上构思组件的封装。能写成组件的内容都进行封装,方便多个地方使用。 受AntDesign的启发,在项目中有搜索表单+table+分页的地方可以封装为一个组件,只需要对组件传入table的列,组成一个配置项,通过配置可以显示搜索表单、table项的

    2024年02月11日
    浏览(45)
  • 用Typescript 的方式封装Vue3的表单绑定,支持防抖等功能。

    Vue3 的父子组件传值、绑定表单数据、UI库的二次封装、防抖等,想来大家都很熟悉了,本篇介绍一种使用 Typescript 的方式进行统一的封装的方法。 Vue3对于表单的绑定提供了一种简单的方式: v-model 。对于使用者来说非常方便, v- model=\\\"name\\\" 就可以了。 但是当我们要自己做一

    2024年02月06日
    浏览(41)
  • 基于VUE3+Layui从头搭建通用后台管理系统(前端篇)十一:通用表单组件封装实现

      本章实现通用表单组件,根据实体配置识别实体属性,并自动生成编辑组件,实现对应数据填充、校验及保存等逻辑。 1. 详细课程地址: https://edu.csdn.net/course/detail/38183 2. 源码下载地址: 点击下载

    2024年02月10日
    浏览(51)
  • vue3 ts element plus form表单二次封装详细步骤 (附参数、类型详细介绍及简单使用示例)

    上篇table 表格封装 讲到项目中经常会用到 table 表格,所以做了封装。当然,form 表单使用的频率依然很高,所以和封装 table 表格的思路相似,对 form 表单也做了一个二次封装的组件。 查看国内预览站 查看国外预览站 1. EasyForm 表单组件封装 src/components/EasyForm/index.vue Form 表单

    2024年02月07日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包