element form

动态 input

<script setup lang="ts">
import { ref, reactive } from 'vue'

import { Delete, Plus } from '@element-plus/icons-vue'
/* components */

/* typescript */

/* 参考地址：https://blog.csdn.net/u014192915/article/details/116176798 */
const dynamicValidateForm = reactive({
  domains: [{
    newValue: '',
    columnName: '',
    key: Date.now()
  }]
})

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

const addDomain = () => {
  dynamicValidateForm.domains.push({
    newValue: '',
    columnName: '',
    key: Date.now()
  })
}

</script>


<template>
  <el-form :inline="true" label-width="70px" :model="dynamicValidateForm">
    <div v-for="(domain, index) in dynamicValidateForm.domains" :key="index" class="inlineForm">
      <el-form-item :key="'columnName' + domain.key" :label="'字段名'" :prop="'domains.' + index + '.columnName'" :rules="{
        required: true, message: '域名不能为空', trigger: 'blur'
      }">
        <el-input v-model="domain.columnName" />
      </el-form-item>
      <el-form-item :key="'newValue' + domain.key" :label="'新值'" :prop="'domains.' + index + '.newValue'">
        <el-input v-model="domain.newValue" />
      </el-form-item>
      <el-form-item>
        <el-button v-if="dynamicValidateForm.domains.length > 1" type="danger" :icon="Delete" circle
          @click.prevent="removeDomain(domain)" />
        <el-button type="success" :icon="Plus" circle @click="addDomain" />
      </el-form-item>
    </div>
  </el-form>
</template>


<style lang="scss" scoped></style>