以配置形式写表单

最新推荐文章于 2023-06-20 10:41:52 发布

WorkAndDebugger

最新推荐文章于 2023-06-20 10:41:52 发布

阅读量170

点赞数

分类专栏： vue2 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Xiang_Gong_Ya_/article/details/128568545

版权

vue2 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

该代码示例展示了如何在Vue.js应用中创建一个可配置的表单组件，通过v-for循环动态渲染表单项，支持select、input和switch等类型，表单数据与formData数组关联，允许用户自定义输入和选择项。

摘要由CSDN通过智能技术生成

表单通用组件通过循环配置项

<template>
  <el-dialog title="新增" :visible.sync="show" center @close="dialogClose">
    <el-form :model="form">
      <el-form-item
        :label="item.label"
        :label-width="formLabelWidth"
        v-for="(item, index) in formData"
        :key="index"
      >
        <el-select
          v-if="item.type == 'select'"
          v-model="form.class"
          :placeholder="item.placeholder"
        >
          <el-option label="类别一" value="1"></el-option>
          <el-option label="类别二" value="2"></el-option>
        </el-select>
        <!--根据type判断使用标签-->
        <el-input
          :placeholder="item.placeholder"
          v-model="form.name"
          v-if="item.type == 'input'"
          autocomplete="off"
          style="width: 215px"
        ></el-input>
        <el-switch
          v-if="item.type == 'switchType'"
          v-model="value"
          active-color="#00E266"
          inactive-color="#CCCCCC"
        >
        </el-switch>
      </el-form-item>
      <slot></slot>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogCancle">取 消</el-button>
      <el-button type="primary" @click="dialogOk">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    props: {
      dialogFormVisible: {
        default: false,
        type: Boolean
      },
      form: {
        default: {},
        type: Object
      },
      formData: {
        default: [],
        type: Array
      }
    },
    data() {
      return {
        value: true,
        show: this.dialogFormVisible,
        formLabelWidth: '120px'
      }
    },
    watch: {
      dialogFormVisible(val, val2) {
        this.show = val
      }
    },
    methods: {
      dialogClose() {
        this.show = false
        this.$emit('show', this.show)
      },
      dialogCancle() {
        this.show = false
        this.$emit('show', this.show)
      },
      dialogOk() {
        this.show = false
        this.$emit('show', this.show)
      }
    }
  }
</script>

<style>
</style>

配置项js

      formData: [
        {
          // 标签类别
          type: 'select',
          label: '类别',
          placeholder: '请选择活动区域'
        },
        {
          type: "input",
          label: '标题',
          placeholder: '请输入标题'
        }, {
          type: "input",
          label: '作者',
          placeholder: '请输入作者'
        }, {
          type: 'switchType',
          label: '开关'
        }],