vue element Cascader 级联选择器

数据结构：

    <el-cascader
              v-else
              :options="options"
              :props="optionProps"
              v-model="classData"
              @change="classChange"
              clearable
            ></el-cascader>

data () {
    return {
      // 规定联级菜单格式
      optionProps: {
        value: 'id',
        label: 'name',
        children: 'child'
      },
      optionsData: [],
      options: [], // 菜单目录
      classData: [], // 选中的菜单分类
    }

  created () {

      this.getClassData()

  },

接口获取菜单数据

    getClassData () {
      this.$api.post('/statistics/getqualitytab', {}, (res) => {
        if (res.status) {
          this.optionsData = res.data
        } else {
          this.$notify.warning({
            title: '提示',
            message: res.msg
          })
        }
      })
    },

  // 选择投稿分类
    classChange (value) {
      this.classData = value
    },