使用vue3+el-form实现动态新增名称,值,并对名称进行必填校验

使用vue3+el-form实现动态新增名称,值,并对名称进行必填校验

效果图

代码

javascript 复制代码
<template>
  <el-form :model="form" :rules="rules" ref="dynamicForm">
    <!-- 动态添加的名称和值 -->
    <el-row v-for="(item, index) in form.items" :key="index">
      <el-col :span="8">
        <el-form-item :prop="'items.' + index + '.key'" :rules="rules.key">
          <el-input v-model="item.key" placeholder="请输入" :disabled="disabled"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item>
          <el-input v-model="item.value" placeholder="请输入" :disabled="disabled"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-button @click="addItem(index)" :disabled="disabled">+</el-button>
        <el-button type="danger" @click="removeItem(index)" :disabled="disabled">-</el-button>
      </el-col>
    </el-row>

    <!-- 添加按钮 -->
    <!--    <el-button type="primary" @click="addItem">Add Item</el-button>-->

    <!-- 提交按钮 -->
    <!--    <el-button type="success" @click="submitForm">Submit</el-button>-->
  </el-form>
</template>

<script setup name="dynamicsForm">
import { ref, reactive, defineProps, watch } from 'vue'
const props = defineProps({
  defaultData: {
    type: [Object, Array]
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
const dynamicForm = ref(null) // 表单引用
const form = reactive({
  items: [] // 动态表单项
})

const rules = reactive({
  key: [{ required: true, message: '请输入', trigger: 'blur' }]
})

// 添加表单项
const addItem = index => {
  // form.items.push({ key: '', value: '' });
  form.items.splice(index + 1, 0, { key: '', value: '' })
}

// 移除表单项
const removeItem = index => {
  form.items.splice(index, 1)
}

// 提交表单
const submitForm = () => {
  dynamicForm.value.validate(valid => {
    if (valid) {
      alert('Form submitted successfully!')
      console.log('Form Data:', form.items)
    } else {
      alert('Form validation failed!')
      return false
    }
  })
}
// 校验表单
const validateForm = async () => {
  const result = {
    status: true,
    data: form.items
  }
  result.status = await dynamicForm.value.validate()
  return result
}
watch(
  () => props.defaultData,
  val => {
    form.items = val && val.length > 0 ? val : [{ key: '', value: '' }]
  },
  {
    immediate: true
  }
)
defineExpose({
  validateForm
})
</script>

<style scoped>
.el-form-item {
  margin-bottom: 20px;
}
</style>
相关推荐
Dorcas_FE5 分钟前
axios请求缓存与重复拦截:“相同请求未完成时,不发起新请求”
前端·spring·缓存
dreams_dream13 分钟前
vue中axios与fetch比较
前端·javascript·vue.js
梦鱼33 分钟前
Vue 项目图标一把梭:Iconify 自用小记(含 TS/JS 双版本组件)
前端·javascript·vue.js
best66634 分钟前
Flex 与 Grid 的 order 参数:布局界的 "插队神器"
前端
小噔小咚什么东东35 分钟前
看到了很多次WebRTC,但是你真的需要它吗?
前端·webrtc
猫七先生36 分钟前
微信小程序一键登录可行性方案
前端·微信小程序
维他AD钙36 分钟前
前端开发 8 个非常实用小技巧:高效解决日常开发痛点
前端
光影少年41 分钟前
webpack和vite优化方案都有哪些
前端·webpack·node.js
给月亮点灯|42 分钟前
Vue基础知识-脚手架开发-初始化目录解析
前端·javascript·vue.js