# 表单高级用法
# 表单初始化
<template>
<el-button type="primary"
@click="handleReload">Key初始化</el-button>
<avue-form :key="reload"
:option="option"></avue-form>
</template>
<script>
export default {
data () {
return {
reload: Math.random(),
option: {
border: true,
align: 'center',
menuAlign: 'center',
column: [
{
label: '姓名',
prop: 'name'
}, {
label: '性别',
prop: 'sex'
}, {
label: '省份',
prop: 'province',
type: 'select',
props: {
label: 'name',
value: 'code'
},
dicUrl: `https://cli.avuejs.com/api/area/getProvince`,
rules: [
{
required: true,
message: '请选择省份',
trigger: 'blur'
}
]
}]
}
}
},
methods: {
handleReload () {
this.reload = Math.random();
this.$message.success('初始化完成')
}
}
}
</script>
显示代码复制代码复制代码
# 配置项服务端加载
TIP
- 这里没有走真真的服务器请求,而是做了一个模拟
<template>
<el-button type="primary"
icon="el-icon-sort"
@click="getOption">服务端加载</el-button>
<avue-form :key="reload"
v-model="form"
:option="option"
v-loading="loading"></avue-form>
</template>
<script>
export default {
data () {
return {
reload: Math.random(),
loading: true,
form: {},
option: {},
};
},
methods: {
getOption () {
this.$message.success('模拟2s后服务端动态加载');
setTimeout(() => {
this.option = {
border: true,
align: 'center',
menuAlign: 'center',
column: [
{
label: '姓名',
prop: 'name'
}, {
label: '性别',
prop: 'sex'
}, {
label: '省份',
prop: 'province',
type: 'select',
props: {
label: 'name',
value: 'code'
},
dicUrl: `https://cli.avuejs.com/api/area/getProvince`,
rules: [
{
required: true,
message: '请选择省份',
trigger: 'blur'
}
]
}]
}
this.form = {
name: '张三',
sex: '男',
province: '110000'
}
this.reload = Math.random()
this.loading = false;
}, 2000)
}
}
}
</script>
显示代码复制代码复制代码
# 配置项切换
<template>
<el-button type="primary"
icon="el-icon-sort"
@click="handleSwitch">切 换</el-button>
<br /><br />
<avue-form :key="reload"
v-model="form"
:option="option">
</avue-form>
</template>
<script>
export default {
data () {
return {
reload: Math.random(),
type: true,
form: {
name: '张三',
sex: '男',
username: 'smallwei',
password: 'smallwei'
},
option: {},
option1: {
addBtn: false,
column: [
{
label: '昵称',
prop: 'name'
}
]
},
option2: {
addBtn: false,
column: [
{
label: '用户名',
prop: 'username'
}, {
label: '密码',
prop: 'password',
type: 'password'
}, {
label: '姓名',
prop: 'name'
}
]
},
};
},
mounted () {
this.handleSwitch();
},
methods: {
handleSwitch () {
this.type = !this.type;
if (this.type) {
this.option = this.option1;
} else {
this.option = this.option2;
}
this.reload = Math.random();
}
}
}
</script>
显示代码复制代码复制代码
# 动态改变结构
<template>
<avue-form v-model:defaults="defaults"
:option="option"
v-model="form"></avue-form>
</template>
<script>
export default {
data () {
return {
defaults: {},
form: {
text1: 0,
},
option: {
column: [{
label: '内容1',
prop: 'text1',
type: 'radio',
dicData: [{
label: '显示',
value: 0
}, {
label: '隐藏',
value: 1,
}]
}, {
label: '内容2',
prop: 'text2',
display: true
}, {
label: '内容3',
prop: 'text3'
}]
}
}
},
watch: {
'form.text1' (val) {
if (val == 0) {
this.defaults.text2.display = true
this.defaults.text3.label = '内容3'
} else {
this.defaults.text2.display = false
this.defaults.text3.label = '有没有发现我变了'
}
}
}
}
</script>
显示代码复制代码复制代码