v-form-dialog
v1.0.1
Published
基于vue、element-ui的表格弹窗组件,用于信息的添加、编辑等操作。
Downloads
2
Maintainers
Readme
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)
}
})