vue element 封装表单

背景:

在前端系统开发中,系统页面涉及到的表单组件比较多,所以进行了简单的封装。封装的包括一些Form表单组件,如下:input输入框、select下拉框、等

实现效果:

vue element 封装表单_第1张图片

理论知识:

表单组件官方链接:点击跳转

vue element 封装表单_第2张图片

封装组件:

封装组件的思路:

 不封装element组件,每一个input组件绑定一个form对象,例如官网。

简单封装element组件,利用for循环生成form表单的每一项el-form-item。

进一步封装,利用判断表单组件的类型,是input、select或者其它表单组件。

终极封装,把el-form表单封装成一个独立的表单,自定义命名为AreaFormItem.vue;然后单页面vue调用AreaFormItem.vue传参以及表单数据回显等操作。

封装组件的过程: 

1.不封装表单组件,代码如下: 

实现代码:【表单组件未封装】


        
            
                
                    
                
            
            
                
                    
                
            
            
                
                    
                
            
            
                
                    
                
            
            
                
                    
                
            
        
    

备注:因为是横着的表单,这里加入了el-row和el-col 。

2.表单组件封装,for循环渲染表单组件input:

vue element 封装表单_第3张图片

//html

        
            
                
                    
                
            
        
    

//涉及到的变量
const state = reactive({
    form: {
        name: '',
        voyageNo: '',
        loadName: '',
        dischargName: '',
        cargoType: ''
    },
})
const formItems = [
    {
        type: 'input',
        label: '船名',
        key: 'name',
        placeholder: '请输入或者选择船名'
    },
    {
        type: 'input',
        label: '航次',
        key: 'voyageNo',
        placeholder: '请输入或者选择航次'
    },
    {
        type: 'select',
        label: '装港',
        key: 'loadName',
        placeholder: '请输入或者选择装港'
    },
    {
        type: 'select',
        label: '卸港',
        key: 'dischargName',
        placeholder: '请输入或者选择始港'
    },
    {
        type: 'input',
        label: '货种',
        span : 4,
        key: 'cargoType',
        placeholder: '请输入或者选择货种',
    }
]

3.封装一个input或者select下拉列表,封装如下:


        
            
                
                    
                    
                
            
        
    
//涉及到的数据
const routeState = reactive({
    loading_startPoint:false,
    options_startPoint:[]
})

4.终极封装,把上面的form表单封装成一个vue组件,自定义命名为 AreaFormItem.vue,

AreaFormItem.vue组件,封装如下:






调用组件AreaFormItem.vue的方式:
//调用组件



                    
                    

你可能感兴趣的:(vue,vue.js,javascript,前端)