Avuejs教程：avue-crud省市区三级联动代码示例

- 日理万妓 2024-03-27 00:19 39阅读 0赞

## 演示 ##

![在这里插入图片描述][8c91383b108c4edcbddcd1097a460d9e.png]

## 代码 ##

<template>
      <avue-crud ref="crud"
                 :data="data"
                 :option="option"></avue-crud>
    </template>
    <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>

--------------------

links：  
[  
https://avuejs.com/crud/crud-dic.html\#%E5%AD%97%E5%85%B8%E8%81%94%E5%8A%A8][https_avuejs.com_crud_crud-dic.html_E5_AD_97_E5_85_B8_E8_81_94_E5_8A_A8]

[8c91383b108c4edcbddcd1097a460d9e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/d2cf2eefaa9e4fe991d4b9d0ff05fae0.png
[https_avuejs.com_crud_crud-dic.html_E5_AD_97_E5_85_B8_E8_81_94_E5_8A_A8]: https://avuejs.com/crud/crud-dic.html#%E5%AD%97%E5%85%B8%E8%81%94%E5%8A%A8