vue动态表单封装

需求：根据传参动态生成表单，例如搜索表格的表单

1.组件封装

<template>
  <el-form class="dynamic-form" ref="form" :model="form" :lable-width="lableWidth" :inline="true">
    <el-form-item v-for="(item,index) in list" :label="item.label" label-position="left"
      :key="index" :props="item.name">
      <component :is="item.type" v-model="form[item.name]">
        <template v-if="item.children">
          <component v-for="(child,i) in item.children.list" :key="`${index}_${i}`"
            :value="child.value" :label="child.label" :is="item.children.type">
            {{child.label}}
          </component>
        </template>
      </component>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSearch">查询</el-button>
      <el-button type="primary" @click="handleReset">重置</el-button>
      <el-button type="primary" @click="handleExport">导出</el-button>
    </el-form-item>

  </el-form>
</template>


<script>
/**
 * 1.list 接受从父组件传递过来的定义渲染接口的内容值
 * 2.利用动态根据传递过来的list 中的type 进行组件渲染
 **/
export default {
  name: 'FormGroup',
  data() {
    return {
      form: {},
    };
  },
  props: {
    list: {
      type: Array,
      default: () => {},
    },
    lableWidth: {
      type: Number,
      default: 100,
    },
  },
  methods: {
    handleSearch() {
      this.$emit('handleSearch', this.form);
    },
    handleExport() {},
    handleReset() {
      this.form = {};
      //this.$refs.form.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.dynamic-form {
  ::v-deep {
    .el-form-item__label {
      color: #9fc0f3;
    }
    .el-input__inner {
      border: 1px solid #2da4ff;
      background: rgba(1, 6, 27, 0.7);
      color: #9fc0f3;
    }
  }
}
</style>

2.传递数据定义

 

[{
      name: 'name',
      type: 'el-input',
      value: '',
      label: '姓名',
    },
    {
      name: 'select',
      type: 'el-select',
      value: '',
      label: '选择',
      children: {
        type: 'el-option',
        list: [
          { value: 'man', label: '男' },
          { value: 'woman', label: '女' },
        ],
      },
}]