<el-cascader ref="refHandle" v-model="formData.filesUrl" clearable :options="filesOptions" :props="filesProps" placeholder="请选择文件地址" class="width-360" @change="handleChange" />
filesProps: {
value: 'url',
label: 'name',
children: 'children',
checkStrictly: true,
lazy: true,
lazyLoad: this.lazyLoad
},
lazyLoad(node, resolve) {
var pathDta = { path: '' }
if (node.data) {
pathDta.path = node.data.url
} else {
pathDta.path = '/'
}
getDirectorytree(pathDta).then(res => {
const nodes = res.data.map(item => ({
...item,
value: item.url,
label: item.name
// leaf: item.bottom
}))
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
resolve(nodes)
})
},
handleChange(value) {
if (value) {
this.formData.path = value[value.length - 1]
}
// 解决:el-cascader当设置了checkStrictly:true属性时,可以选择任意一级的菜单。但是同时设置动态加载的时候。点击前面的radio按钮会出现一个暂无数据的面板
const panelRefs = this.$refs.refHandle.$refs.panel
if (panelRefs.activePath.length !== 0) {
panelRefs.activePath.forEach(item => {
if (item.children.length === 0) {
panelRefs.lazyLoad(panelRefs.getCheckedNodes()[0])
}
})
}
},
el-cascader任意一级选项和懒加载组合使用,选中前面的radio按钮时无法触发懒加载
于 2022-03-23 15:15:58 首次发布