CarTree.vue
3.53 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<template>
<el-cascader
placeholder="请选择/搜索车辆"
:options="options"
filterable
clearable
:props="prop"
v-model="valueList"
@change="getValue">
</el-cascader>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
export default {
//import引入的组件需要注入到对象中才能使用"
components: {},
props: {
value: {
type: Array,
default: []
}
},
data() {
//这里存放数据"
return {
options: [],
prop: {
value: 'sim',
label: `name`,
children: 'children',
},
};
},
//计算属性 类似于data概念",
computed: {
valueList: {
get(){
let value = this.value;
if (value || value === null || value.length === 0) {
return value
}
return value[ value.length - 1 ];
},
set(val){
if (val || val === null || val.length === 0) {
this.$emit("input",val)
}
return val[ val.length - 1 ]
console.log(val)
}
}
},
//监控data中的数据变化",
watch: {},
//方法集合",
methods: {
getValue(val){
console.log(val)
},
/**
* 查询级联数据列表
*/
initTreeData() {
this.$axios({
method: 'get',
url: `/api/jt1078/query/car/tree/` + 100,
}).then((res) => {
if (res && res.data && res.data.data) {
if (res.data.data.code == 1) {
let data1 = res.data.data.result;
this.addChannel(data1);
console.log(data1)
} else if (res.data.data.message) {
this.$message.error(res.data.data.message);
}
} else {
this.$message.error("请求错误，请刷新再试");
}
});
},
/**
* 整理数据结构
* @param treeNo
*/
addChannel(data) {
for (let i in data) {
if (data[i] && data[i].sim){
data[i].name = data[i].code;
data[i].children = this.transformItems(data[i].sim)
}else if (data[i].children && data[i].children.length > 0){
this.addChannel(data[i].children);
}
}
this.options = data
},
/**
* 添加通道
*/
transformItems(sim) {
let originalArray = ['ADAS', 'DSM', '路况', '司机', '整车前', '中门', '倒车', '前门客流', '后面客流'];
return originalArray.map((name, index) => ({
sim: `${sim}-${index + 1}`, // 创建唯一值，使用SIM号和索引
name: name
}));
}
},
//生命周期 - 创建完成（可以访问当前this实例）",
created() {
this.initTreeData();
},
//生命周期 - 挂载完成（可以访问DOM元素）",
mounted() {
},
beforeCreate() {
}, //生命周期 - 创建之前",
beforeMount() {
}, //生命周期 - 挂载之前",
beforeUpdate() {
}, //生命周期 - 更新之前",
updated() {
}, //生命周期 - 更新之后",
beforeDestroy() {
}, //生命周期 - 销毁之前",
destroyed() {
}, //生命周期 - 销毁完成",
activated() {
} //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>
</style>