当数据比较多的时候,一次性获取全部数据速度太慢,而且体验不太好,所有需要用到懒加载,一级一级的选择数据就能很好避免速度慢的问题。
以及我们使用el-cascader加载默认值的时候,cascader的输入框和联级选择框都会遇到的回显问题。看代码!!!
<el-form-item label="xxxx">
<el-cascader :props="propsData" size="medium" @change="CascaderChange"
ref="myCascaderChannel" v-model="channeldata"></el-cascader>
</el-form-item>
<script>
import {
function1,
function2,
} from "@/api/xxxxx.js";
export default {
data(){
return:{
propsData: {
// value:'value',
// label:'label',
// checkStrictly:true,
lazy: true,
lazyLoad: (node, resolve) => {
if (node.level == 0) {
this.function1(node, resolve);
}
else if (node.level == 1) {
this.方function2(node, resolve)
}
}
},
id:0,
dialogData :{},
channeldata:"",
this.dialogVisible :false,
},
},
methods: {
function1(node, resolve) {
var that = this;
let list=[];
function1().then((res) => {
/*let str = JSON.stringify(res.Data.list).replace(/属性id/g, 'value');
str = str.replace(/属性名称/g, 'label');
list = JSON.parse(str);
const nodes = Array.from(list).map((item) => ({
value: item.value,
label: item.label,
}));*/处理成级联地址允许的属性 label value
resolve(nodes);
});
},
function2(node, resolve) {
var that = this;
that.id = node.data.value;
let level = node.level;
let list=[];
function2(that.id ).then((res) => {
let str = JSON.stringify(res.Data.list).replace(/属性id/g, 'value');
str = str.replace(/属性Name/g, 'label');
list = JSON.parse(str);
const nodes = Array.from(list).map((item) => ({
value: item.value,
label: item.label,
leaf: level >= 1,
}));
resolve(nodes);
})
.catch(error => {
resolve(list);
})
},
update(scope) {
this.dialogData = JSON.parse(JSON.stringify(scope.row));
this.channeldata = [];
this.channeldata.push(scope.row.ChannelShopId);
this.channeldata.push(scope.row.ChannelId);
this.dialogVisible = true;
},
CascaderChange(data) {
if (data) {
if (data.length == 2) {
this.dialogData.Id1 = data[0];
this.dialogData.Id2 = data[1];
if(this.$refs.myCascaderChannel.getCheckedNodes()[0])
{
let list=this.$refs.myCascaderChannel.getCheckedNodes()[0].pathLabels;//获取选中的节点数组
this.showChannel=list[0]+'/'+list[1];
}
} else {
this.$message({
message: '警告哦,xxxxxxxx,请重新选择!!!',
type: 'warning'
});
}
}
},
}
}
</script>
参数说明:
value / v-model 选中项绑定值
options 可选项数据源,键名可通过 Props 属性配置
lazy 是否动态加载子节点,需与 lazyLoad 方法结合使用
lazyload 加载动态数据的方法,仅在 lazy 为 true 时有效
lazyload 方法有两个参数,第一个参数node
为当前点击的节点,第二个resolve
为数据加载完成的回调(必须调用)文章来源:https://www.toymoban.com/news/detail-607442.html
Element的el-cascader(级联器)组件的value容易获取,主要是label。可以通过以下方式获取:文章来源地址https://www.toymoban.com/news/detail-607442.html
this.$refs.myCascaderChannel.getCheckedNodes()[0].pathLabels;
this.$refs["myCascaderChannel"].getCheckedNodes()[0].label
到了这里,关于element ui cascader级联选择器 动态加载以及回显的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!