使用element-ui Cascader 级联选择器动态渲染子级

当选中某一级时，动态加载该级下的选项

代码如下

data() {

return {

// 渲染分类

props: {

lazy: true,

checkStrictly: true,

value: 'categoryId',

lazyLoad(node, resolve) {

let categoryId = ''

this.categoryId = []

if (node.children) {

categoryId = node.data.categoryId

} else {

categoryId = ''

}

// console.log(node.data.categoryId)

getCategoryAll({ categoryId }).then(res => {

this.getCategoryList = res.data

// 通过调用resolve将子节点数据返回，通知组件数据加载完成

resolve(this.getCategoryList)

})

}

}

}

},

/**

* 选择分类

*/

handleCategoryChange(value) {

this.listQuery.categoryId = []

this.listQuery.categoryId = value

// 去除input框的焦点样式(看需求，以下功能可不用，会有一个bug，要点第2次才行)

const $category = this.$refs.category.$el.querySelector('.is-focus')

$category.className = $category.className.replace(' is-focus', '')

// 隐藏菜单悬浮框

const $div = document.querySelector('.category-fixed')

$div.style.display = 'none'

},