avue-crud 组件,form中实现树形下拉框联动输入框数据,省市区字典联动
avue-crud组件\字典联动
·
1、需要实现的功能是,当我选择一条数据的时候,后面几个输入框会自动带入
使用的是avue-crud组件
参数配置:
<avue-crud ref="crud" :data="data" v-mode='form' :option="option" ></avue-crud>
{
label:'下拉框',
prop:'prop',
type:'tree',
dicUrl:'xxx/xxx', // 使用前提是这个接口中存在需要配置的这三个参数
// 示例数据:[{prop:'111',liandong1:'111',liandong2:'2222'},{prop:'222',liandong1:'333',liandong2:'444'}]
props:{
label:'name',
value:'code',
},
slot:true,
nodeClick:(data)=>{
// 节点点击的时候会获取到数据
this.form.liandong1 = data.liandong1
this.form.liandong2 = data.liandong2
}
},
{
label:'联动1',
prop:'liandong1'
},
{
label:'联动2',
prop:'liandong2'
}
2、省市区字典联动
官网示例:https://avuejs.com/crud/crud-dic/#%E5%AD%97%E5%85%B8%E8%81%94%E5%8A%A8
注意点:2.9.0+ 用cascader,以下用cascaderItem
联动只支持dicUrl远程字典
<avue-crud ref="crud" :data="data" :option="option" ></avue-crud>
<script>
let baseUrl = 'https://cli.avuejs.com/api/area'
export default {
data() {
return {
data: [
{
name:'张三',
sex:'男',
province: '110000',
city: '110100',
area: '110101',
}, {
name:'李四',
sex:'女',
province: '130000',
city: '130200',
area: '130202',
}
],
option:{
column:[
{
label:'姓名',
prop:'name',
}, {
label:'性别',
prop:'sex'
},{
label:'省份',
prop:'province',
type:'select',
cascader: ['city'],
cascaderIndex:1,
props: {
label: 'name',
value: 'code'
},
dicUrl:`${baseUrl}/getProvince`
},
{
width: 120,
label: '城市',
prop: 'city',
type: 'select',
cascader: ['area'],
cascaderIndex:1,
cell: true,
props: {
label: 'name',
value: 'code'
},
dicUrl: `${baseUrl}/getCity/{{key}}`,
rules: [
{
required: true,
message: '请选择城市',
trigger: 'blur'
}
]
},
{
width: 120,
label: '地区',
prop: 'area',
cell: true,
props: {
label: 'name',
value: 'code'
},
type: 'select',
dicUrl: `${baseUrl}/getArea/{{key}}`,
rules: [
{
required: true,
message: '请选择地区',
trigger: 'blur'
}
]
}
]
}
}
},
mounted(){
//放在数据加载完后执行
this.$refs.crud.dicInit('cascader');
}
}
</script>
更多推荐
已为社区贡献6条内容
所有评论(0)