使用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>
相关推荐
Zestia12 分钟前
页面点击跳转源代码?——element-jumper插件实现
前端·javascript
前端小白199512 分钟前
面试取经:工程化篇-webpack性能优化之优化loader性能
前端·面试·前端工程化
PineappleCoder12 分钟前
大小写 + 标点全搞定!JS 如何精准统计单词频率?
前端·javascript·算法
zhangbao90s14 分钟前
Web组件:使用Shadow DOM
前端
hhy前端之旅14 分钟前
语义版本控制:掌握版本管理的艺术
前端
coding随想14 分钟前
深入浅出DOM操作的隐藏利器:Range(范围)对象——掌控文档的“手术刀”
前端
前端小白199515 分钟前
面试取经:工程化篇-webpack性能优化之减少模块解析
前端·面试·前端工程化
一枚前端小能手15 分钟前
🏗️ 项目越来越大维护不动了,微前端架构了解一下
前端
KasukabeTsumugi15 分钟前
TypeScript:联合类型可以转化为元组类型吗?数组如何用联合类型逐项约束?
javascript
文艺理科生24 分钟前
Nuxt.js入门指南-Vue生态下的高效渲染技术
前端·vue.js·nuxt.js