element联级选择器（获取省市地区）后台动态获取

功能类

发布日期: 2019-10-14

阅读时长: 3 分

阅读次数:

如何根据后台接口数据动态展示联级选择器，本文章以获取省市地区为例进行说明
通过点击省地区动态获取市地区

首先，看一下element联级选择器长啥样：

<el-cascader :options="options" v-model="value" clearable></el-cascader>

<script>
  export default {
    data() {
      return {
        value: '',
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }]
        }]
      }
    }
  }
</script>

可以清楚的看到，value为选择后的动态结果，options属性控制着联级菜单的内容，每一级都有value 和 lable属性，控制着展示的内容，children属性控制着是否含有子集菜单

了解到结构后我们就可以动态获取了：

根据props属性设置后台对应参数

<el-cascader v-model="adress" :options="optionsAdress" :props="props" clearable placeholder="请选择地区">
</el-cascader>

<script>
  data () {
    // 选择结果以数组方式展示
    adress: [],
    // 选择器结果数据长下面这样
    optionsAdress: [{ code: '111', name: '北京', cities: [{ code: '112', name: '海淀区' }]}],
    // props设置参数对应属性
    props: {
      value: 'code',
      label: 'name',
      children: 'cities'
    },
  }
</script>

在初始化获取省列表数据赋值给optionsAdress进行展示

data () {
  optionsAdress: [],
  // ...
},
created () {
  this.getProvice()
},
methods: {
  getProvice () {
    this.axios.get('proviceUrl').then(data => {
      this.optionsAdress = data.data
      // 现在，数据长这样：[{ code: '111', name: '北京'},{ code: '222', name: '河北省' }]并能在联级菜单进行显示
    }).catch(err => {
      console.log(err.msg)
    })
  }
}

我们通过点击省获取对应省的市地区，所以就得动态的给optionsAdress的对应项加cities子属性，看代码：

// 用active-item-change监听省地区的变化
<el-cascader v-model="adress" :options="optionsAdress" :props="props" clearable placeholder="请选择地区"
  @active-item-change="handleItemChange">
</el-cascader>

<script>
  data () {
    adress: [],
    optionsAdress: [],
    props: {
      value: 'code',
      label: 'name',
      children: 'cities'
    },
  }
  created () {
    this.getProvice()
  },
  methods: {
    getProvice () {
      this.axios.get('proviceUrl').then(data => {
        this.optionsAdress = data.data
        // 现在，数据长这样：[{ code: '111', name: '北京'},{ code: '222', name: '河北省' }]并能在联级菜单进行显示
      }).catch(err => {
        console.log(err.msg)
      })
    },
    handleItemChange (val) {
      // 根据省的code获取市的列表并添加到对应省的数据里
      const that = this
      that.optionsAdress.forEach(item => {
        if (item.code === val[0]) {
          that.axios.get('cityUrl' + '?proviceCode=' + val[0]).then(data => {
            item.cities = data.data
            // 现在，数据长这样：[{ code: '111', name: '北京'},
            // { code: '222', name: '河北省', cities: [{ code: '223', name: '石家庄' }]}]
          }).catch(data => {
            console.log(err.msg)
          })
        }
      })
    },
  }
</script>

以上即为获取省市的全部代码，adress的值即为最后选取的省市信息，也可以通过change事件监听值的变化，希望能帮到大家

qiangqiang

http://zzqz.github.io/elementlianji/