<avue-crud ref="crud" :data="data" :option="option" ></avue-crud>
<script>
let baseUrl = 'https://cli.avuejs.com/api/area'
export default {
data() {
return {
data: [],
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.data=[{
name:'张三',
sex:'男',
province: '110000',
city: '110100',
area: '110101',
}, {
name:'李四',
sex:'女',
province: '130000',
city: '130200',
area: '130202',
}]
this.$nextTick(()=>{
//放在数据加载完后执行
this.$refs.crud.dicInit('cascader');
})
}
}
</script>
运行结果