前几天接到个功能,需要Cascader 级联选择器选择多条省市区,Cascader 的value值自然不用说。但是还需要把自己选择的省市区用文字的类型表达出来。这就比较复杂了,找遍了全网貌似没有找到这种功能?如果有大佬有更好的建议可以评论指教一下。楼下见格式
但是 观察了一下element的方法好像目前没有方法转成第一张图那种类型。网上好像都是使用getCheckedNodes()获取label
this.$refs['cascader'].getCheckedNodes().map(its => {
newArray.push(its.pathLabels)
})
console.log(newArray)
这个跟我需要的根本不一样啊!
但是可以用它这种数据来筛选,就是工程量比较浩大,不敢在change事件转,只能在表单提交过程中转好提交到后端。。。所以大家有什么更好的方法,请留言指点一下,谢谢
下面直接贴代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>element次联获取所有label数据</title>
</head>
<style>
#app,
html,
body {
width: 100%;
height: 100%;
}
.box {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="app">
<div class="box">
<el-cascader-panel ref="cascader" v-model="data" :options="options" :props="{multiple:true,emitPath:false}"
@change="change"></el-cascader-panel>
<button @click="send()">点击</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
data: [],
labelArray: [],
options: [{
value: '1',
label: '北京',
children: [{
value: '011',
label: '北京市',
children: [{
value: '0011',
label: '朝阳区'
},
{
value: '0012',
label: '海淀区'
},
{
value: '0013',
label: '西城区'
},
{
value: '0014',
label: '东城区'
},
]
}]
},
{
value: '2',
label: '上海',
children: [{
value: '021',
label: '上海市',
children: [{
value: '0021',
label: '静安区'
},
{
value: '0022',
label: '闵行区'
},
{
value: '0023',
label: '宝山区'
},
{
value: '0024',
label: '奉贤区'
},
]
},
{
value: '022',
label: '上海市12',
children: [{
value: '00221',
label: 'sadas'
},
{
value: '00222',
label: 'asdas'
},
{
value: '00223',
label: '宝山dasd区'
},
{
value: '00224',
label: '奉asdas贤区'
},
]
},
{
value: '022',
label: '上海市213',
children: [{
value: '00212321',
label: 'sadasddas'
},
{
value: '00222123',
label: 'asdasdsadas'
},
{
value: '002123e1223',
label: '宝山asdsaddasd区'
},
{
value: '0022132124',
label: '奉asasdasddas贤区'
},
]
}
]
},
{
value: '3',
label: '安徽',
children: [{
value: '031',
label: '芜湖市',
children: [{
value: '0031',
label: '镜湖区'
},
{
value: '0032',
label: '弋江区'
},
{
value: '0033',
label: '鸠江区'
},
{
value: '0034',
label: '三山区'
},
]
},
{
value: '132',
label: '马鞍山市',
children: [{
value: '1321',
label: '雨山区'
},
{
value: '1322',
label: '花山区'
},
]
},
{
value: '1321231',
label: '合肥市',
children: [{
value: '131231221',
label: '雨山123123区'
},
{
value: '1322123213',
label: '花山123123区'
},
]
}
]
}
], //数据
}
},
methods: {
change(e) {
let newArray = []
this.$refs['cascader'].getCheckedNodes().map(its => {
// console.log(its.pathLabels)
newArray.push(its.pathLabels)
})
console.log(newArray)
this.labelArray = [...newArray]
},
send() {
let labelArray = [
...this.labelArray.filter(i => i.length === 1),
...this.labelArray.filter(i => i.length === 2),
...this.labelArray.filter(i => i.length === 3),
]
console.log('labelArray',labelArray)
let datas = this.forData(labelArray,[],'')
console.log(datas)
},
forData(arr,newArray,show) {
for(let i=0;i<arr.length;i++){
if(arr[i].length === 1){ // 省
newArray.push({
name:arr[i][0],
})
let sheng = arr.filter(fl => { //删除已选择的省其他多余的数据
return fl[0] !== arr[i][0]
})
this.forData(sheng,newArray)
break;
}else if(arr[i].length === 2){ //市
var bels = false
var index
//市可能有出现过的省,也有可能有出现过的市
if(newArray.length !== 0){ // newArray 有数据的前提下
for(let na=0;na<newArray.length;na++){
if(arr[i][0] === newArray[na].name){ //省相同
bels = true
index = na
}else{
bels = false
}
}
}else{// newArray无数据 直接全选的市
bels = false
}
if(bels){
newArray[index].children.push({
name:arr[i][1]
})
}else{
newArray.push({
name:arr[i][0],
children:[{
name:arr[i][1]
}]
})
}
let shi = arr.filter(fl => {
return fl[1] !== arr[i][1]
})
var bels = false
var index
this.forData(shi,newArray)
break;
}else{ //区县
var sheng = false
var shi = false
var indec = []
if(newArray.length !== 0){
for(let sc = 0;sc<newArray.length;sc++){
//判断 省是否已经存过了
if(arr[i][0] === newArray[sc].name){
sheng = true
indec.push(sc)
for(let tc=0;tc<newArray[sc].children.length;tc++){
if(arr[i][1] === newArray[sc].children[tc].name){
shi = true
indec.push(tc)
break;
}else{
shi = false
//break,continue,return
continue;
}
}
break;
}else{ //
sheng =false
}
}
}else{
sheng =false
}
if(!sheng){
newArray.push({
name:arr[i][0],
children:[{
name:arr[i][1],
children:[{
name:arr[i][2]
}]
}]
})
}else if(sheng && !shi){
newArray[indec[0]].children.push({
name:arr[i][1],
children:[{
name:arr[i][2]
}]
})
}else if(sheng && shi){
newArray[indec[0]].children[indec[1]].children.push({
name:arr[i][2]
})
}
var sheng = false
var shi = false
var indec = []
}
}
return newArray
}
}
})
</script>
</body>
</html>
完美解决,过程比较复杂,刚开始bug超多,后面一步一步完善出来的,真的是太难了呀!