vue中用Element-ui封装表单(form)组件动态渲染数据展示

1. 创建一个searchForm组件，将需要封装的searchForm组件全局注册，为了方便下次直接使用

在main.js文件中全局注册

import SearchForm from './components/SearchForm'
Vue.component('SearchForm', SearchForm)

2. 在searchForm组件中创建基本结构

<template>
  <div>
    <el-form
      class="form"
      ref="refForm"
      :size="size"
      inline
      :label-width="labelWidth"
    >
        <el-form-item
        v-for="item in searchForm"
        :label="item.label"
        :key="item.prop"
        class="formItem"
      >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "SearchForm",
  props: {
    //控制文本框大小
    labelWidth: {
      type: String,
      default: "50px",
    },
    //控制每个控件的尺寸
    size: {
      type: String,
      default: "mini",
    },
    //渲染表单的表头和类型的数据
    searchForm: {
      type: Array,
      default: () => [],
    },
    //表单收集到的值
    searchData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

以上通过props传递的数据包含业务相关数据，组件前端行为需要的数据

el-form-item会根据传递的searchForm数据进行遍历，每遍历一次会产生一个el-form-item，而我们只需要在遍历时拿着每一项进行判断，进而创建对应的表单组件

<el-form-item
        v-for="item in searchForm"
        :label="item.label"
        :key="item.prop"
        class="formItem"
      >
        <!-- 输入框 -->
        <el-input
          v-if="item.type === 'Input'"
          v-model="searchData[item.prop]"
          size="mini"
          :style="{ width: item.width }"
        >
        </el-input>

       <!-- 下拉框 -->
        <el-select
          v-if="item.type === 'Select'"
          v-model="searchData[item.prop]"
          size="mini"
          @change="item.change(searchData[item.prop])"
          :style="{ width: item.width }"
        >
          <el-option
            v-for="op in item.options"
            :label="op.label"
            :value="op.value"
            :key="op.value"
          >
              </el-option>   
              ...
              ...
              ...
</el-form-item>

3. 使用searchForm组件，并通过props传递数据

<template>
  <div class="ces-main">
    <searchForm
      label-width="50px"
      :searchData="searchData"
      :searchForm="searchForm"
    >
    </searchForm>
  </div>
</template>

export default {
  name: "home",
  data() {
    //表单查询一般分为input，下拉框，和日期，下面是下拉框时的设置下拉信息的情况，我的项目没有用到，但是留着方便看
    let sexs = [
      { label: "男", value: "1" },
      { label: "女", value: "2" },
    ];
    let sexProps = { label: "label", value: "value" };
    return {
      searchData: {
        //查询表单的对应的值
        name: "",
        sex: null,
      },
      searchForm: [
        //这里是渲染查询表单的表头和类型的数据
        {
          type: "Input",
          label: "姓名",
          prop: "name",
          width: "180px",
          placeholder: "请输入姓名...",
        },
        {
          type: "Select",
          label: "性别",
          prop: "sex",
          width: "180px",
          options: sexs,
          props: sexProps,
          change: (row) => console.log(row),
          placeholder: "请选择性别...",
        },
      ],
    };
  },

};
</script>

4. 效果图展示：

5. 总结

在searchForm中配置一组组对象，对象中包含要生成的控件类型并且添加一个属性，该属性的名字和在父组件的data定义的名字同名，因为要保证收集到的数据是响应式的，然后将该对象通过props传递给searchForm组件，之后会对searchForm进行遍历，每遍历一次就会根据当前对象生成一个表单控件