使用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'

},

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,059评论 0 2
  • # Ajax标签(空格分隔): 笔记整理---[TOC]### 从输入网址开始:- 在学习ajax之前,你应该先了...
    V8阅读 289评论 1 0
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,342评论 0 3
  • 《从点子到产品》读后感 一、需求管理: 需要综合考虑需求的优先级和开发成本高低的。用p表示需求的优先级,优先级由低...
    MG小虎牙阅读 288评论 0 0
  • 昨天下午,我正在炒菜,门铃响,我开门一看,原来老公下班回来了,他说:“快帮忙卸货。”我一看,他买了我喜欢吃的花生、...
    九月之实阅读 928评论 0 0