想要实现的效果 当选择项只有一个的时候 自动展开下一级 最后一级和第一级的时候 用户自己点击 其他时候自动展开
看到源码是这样操作的 大家有更好的可以交流啊
【vue.js|el-cascader 自动展开第一项或者某一项的下一级】
文章图片
{
@Prop({
type: String,
required: false,
default: ''
})
private requestKey !: string;
@Prop({
type: Boolean,
required: false,
default: false
})
private showText !: boolean;
@Prop({
type: String,
required: false,
default: ''
})
private inputText !: string;
@Prop({
type: Boolean,
required: false,
default: false
})
private disabled !: boolean;
@Ref()
private readonly cascader !: Cascaderprivate recordText=false;
// 【修改的时候】用来判断路径改没改变没改变传入的inputText，改变了新的选择的valueprivate get path (): string {
if (!this.value) {
return '';
}
this.$refs.cascader && this.$emit('change', (this.$refs.cascader as any).inputValue);
return this.value;
}private set path (val) {
const value = https://www.it610.com/article/val;
this.$emit('update:value', value);
this.$emit('input', value);
}private selectPath: string[] = [];
private props = {
lazy: true,
value: 'value',
label: 'label',
emitPath: false, // 只返回最后一个节点
lazyLoad: (node: any, resolve: any) => {
const { level, pathNodes } = node;
this.selectPath = [];
// if (level === 0) {
//resolve([]);
//return;
// }
// if (level === 1) {
//this.dataOptions = this.dataPathOptions;
// }
if (pathNodes && pathNodes.length) {
pathNodes.forEach((item: object, index: number) => {
const value = https://www.it610.com/article/pathNodes[index] ? pathNodes[index].value :'';
this.selectPath.push(value);
});
}
Fetch.get(`/api/project_info?application=${this.requestKey}&query=${this.selectPath.join('/')}`, {}, false).then(async response => {
const nodes = response.data.map((item: any) => ({
label: item.company_name || item.scan_type || item.name || item.train_type || item.parse_name,
value: item.company_name || item.ID || item.name || item.train_type || item.parse_name,
leaf: node.level >= 3
}));
resolve(Array.from(new Set(nodes)));
if(response.data.length === 1 && level !== 3 && level !== 0 ){ // 当只有一级 自动展开下一级 后台固定关联项目只有四级 最后一级 用户自己选择
await this.$nextTick()
const nextMenu = (this.$refs.cascader as any).panel.$refs.menu[level]
if (nextMenu) {
const firstNode = nextMenu.$el.querySelector('.el-cascader-node[tabindex="-1"]');
firstNode.focus();
firstNode.click();
}
}
});
}
};
private visibleChange (visible: boolean) {
console.log("visibleChange",this.path)
const cascader = this.$refs.cascader as any;
if (this.showText && !this.recordText) {
cascader.inputValue = https://www.it610.com/article/this.inputText;
cascader.presentText = this.inputText;
}
}@Watch('showText', { immediate: true })
private async onTextChange () {
await this.$nextTick();
const cascader = this.$refs.cascader as any;
if (cascader && this.showText) {
cascader.inputValue = https://www.it610.com/article/this.inputText;
}
}@Watch('path')
private async onPathChange () {
await this.$nextTick();
if (this.showText && (this.$refs.cascader as any).inputValue !== this.inputText) {
this.recordText = true;
}
}
}
="scss" scoped>
@import '~@/components/input/input.scss';
推荐阅读
- typescript|获取年月日星期几
- Vue|Vue-cli 脚手架一
- react.js|react-vant 实现黑暗模式
- JavaScript|JavaScript---常用元素的属性操作(点击图片修改src属性)
- javascript案例|javascript小案例-----动态生成删除表格
- JavaScript|JavaScript笔记（十）-----内置对象（数学对象与日期对象）
- JavaScript|JavaScript-----禁止鼠标选中文字和禁止鼠标右键上下文菜单
- HTML5|HTML5新增标签（一）
- JavaScript|JavaScript笔记（四）-----运算符