v-form-dialog

v-form-dialog

基于vue、element-ui的表格弹窗组件，用于信息的添加、编辑等操作。

Installing

install with npm

npm install --save v-form-dialog

Import into your component:

import FormDialog from 'v-form-dialog';

Useage:

const schema = [
    { "prop": "name", "label": "姓名","tooltip":"姓名格式为字母数字" },
    { "prop": "sex", "label": "性别","type":"radio","options":[{"label":"男","value": 1},{"label":"女","value": 2}],"default": 1 },
    { "prop": "age", "label": "年龄","type":"number","controlsPosition": "right","min": 1,"max": 200 },
    { "prop": "birth", "label": "生日","type":"date" },
    { "prop": "city","label": "城市","type":"select", "options":[{"label":"北京","value": "beijing"},{"label":"上海","value": "shasnghai"}],"default": "beijing"},
    { "prop": "like","label": "兴趣爱好","type":"checkbox", "options":[{"label":"唱歌"},{"label":"跳舞"}],"valueKey": "label","default":[]}
]
const rules = {
    "name":[
        {"required":true,"message":"请输入姓名","trigger":"blur"},
        {"pattern":"^[a-zA-Z0-9]+$","message":"姓名格式不正确","trigger":"blur"}
    ],
    "city":[
        {"required":true,"message":"请选择城市","trigger":"blur"}
    ]
}
FormDialog.show({
    title:"例子",
    schema: schema,
    rules: rules,
    submit: (form, cb)=>{
        //模拟保存，显示loading
        const loading=this.$loading({ fullscreen: true })
        setTimeout(()=>{
            this.$message({type:'success',message:'保存成功',duration: 2000})
            loading.close()
            cb && cb();
        },1000)
        
    }
})