封装表单组件

封装表单组件

封装的表单,页面传值给组件组件，接受后循环判断渲染出想要的输入框和选择框

html写法

<div>
      <!-- 表单组件 -->
      <tuancu-kuang inline :formLabel="formLabel" :from="searchFrom">
        <!-- 插槽用法 -->
        <el-button type="primary" @click="onSubmit" icon="el-icon-search">查找</el-button>
        <el-button type="primary" @click="added" icon="el-icon-edit">新增</el-button>
      </tuancu-kuang>
    </div>

引入

import TuancuKuang from "../../components/zjfzhuan/TuancuKuang";

//注册
components: {TuancuKuang}
// 传的值
 	searchFrom: {
        keyword: "",
      },
      formLabel: [
        {
          model: "keyword",
          label: "角色名称",
          type: "input",
        },
      ],

组件页面

<template>
    <div>
        <!-- 封装from表单 -->
        <el-form :model="from" ref="from" label-width="100px" :inline="inline" >
            <el-form-item v-for="(item) in formLabel" :placeholder="'请输入'+item.label" :key="item.model">
                <el-input v-model="from[item.model]" :placeholder="'请输入'+item.label" clearable  v-if="item.type ==='input'"></el-input>
                <el-select v-model="from[item.model]" :placeholder="'请选择'+item.label"  v-if="item.type == 'select'" clearable>
                    <el-option v-for="i in item.optios" :key="i.value" :value="i.value"  :label="i.label"></el-option>
                </el-select>
                <el-switch clearable v-model="from[item.model]" v-if="item.type == 'switch'"></el-switch>
                    <el-cascader
                    v-model="from[item.model]"
                    :placeholder="'请选择'+item.label"
                    v-if="item.type == 'cascader'"
                    :options="item.optios"
                    :props="{ checkStrictly:true}"
                    clearable >
                    </el-cascader>
            </el-form-item>
            <el-form-item><slot></slot></el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {
    props:{
        from:Object,
        formLabel:Array,
        inline:Boolean,
    },
}
</script>

<style>

</style>