基于Element Cascader 级联选择器实现动态获取数据
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于Element Cascader 级联选择器实现动态获取数据相关的知识,希望对你有一定的参考价值。
参考技术A 1,先请求一个接口,获取级联选择器的第一层数据2,根据点击的第一层数据中的某一条获取的id获取后台数据,渲染级联选择器的第二层数据
element cascader的例子中数据都是在data中一次性写好的,即都有children属性,渲染第二层第三层等
element-ui之级联选择器(Cascader) 全选 功能
最近产品要求做一个省市区选择,效果就建议使用element-UI的cascader级联,这也是我第一次使用此插件,但要在原cascader级联基础上加一个“全选”按钮,查看官方文档没有关于全选功能属性设置。搜索也没找到好的方法解决。最后请教一个大牛,下面是实现全选的方法.
(官方文档地址:https://element.eleme.cn/#/zh-CN/component/cascader)
方法就是:从树结构中抽出数据。变与model结构就可以了。
需要引用(官方可下载):
<script src="js/vue.js"></script>
<script src="js/index.js"></script>
<link rel="stylesheet" href="css/index.css">
JS代码:
var data = [{
id: 1,
name: \'东南\',
children: [{
id: 2,
name: \'上海\',
children: [
{ id: 3, name: \'普陀\' },
{ id: 4, name: \'黄埔\' },
{ id: 5, name: \'徐汇\' }
]
}, {
id: 7,
name: \'江苏\',
children: [
{ id: 8, name: \'南京\' },
{ id: 9, name: \'苏州\' },
{ id: 10, name: \'无锡\' }
]
}, {
id: 12,
name: \'浙江\',
children: [
{ id: 13, name: \'杭州\' },
{ id: 14, name: \'宁波\' },
{ id: 15, name: \'嘉兴\' }
]
}]
}, {
id: 17,
name: \'西北\',
children: [{
id: 18,
name: \'陕西\',
children: [
{ id: 19, name: \'西安\' },
{ id: 20, name: \'延安\' }
]
}, {
id: 21,
name: \'新疆维吾尔族自治区\',
children: [
{ id: 22, name: \'乌鲁木齐\' },
{ id: 23, name: \'克拉玛依\' }
]
}]
}];
var Main = {
data() {
return {
check: false,
casVal: [],
quchong: [],
props: {
multiple: true,
value: \'id\',
label: \'name\'
},
options: data
};
},
computed: {
allCheckValues() {
var model = []
function tree2arr(arr, str, level) {
arr.forEach(it => {
let newStr = str.length ? [...str, it.id] : [it.id];
if (it.children) {
tree2arr(it.children, newStr, level + 1)
} else {
model.push(newStr)
}
})
}
tree2arr(this.options, [], 0)
return model
},
},
methods: {
onCheck(v) {
this.casVal = v ? this.allCheckValues : []
console.log(this.casVal)
},
handleChange(value) {
let selectVal = value;
this.allCheckValues.length==selectVal.length?this.check = true : this.check = false;
console.log(selectVal, \'选中的vlaue值\')
},
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount(\'#app\')
以上是关于基于Element Cascader 级联选择器实现动态获取数据的主要内容,如果未能解决你的问题,请参考以下文章
基于Element UI Cascader 级联选择器的中国省市区级联数据
vue-element-ui-Cascader 级联选择器支持多选---折腾记
element-ui之级联选择器(Cascader) 全选 功能
Element-UI级联选择器el-cascader报错Cannot read property level of null