使用uniapp框架，uview组件 如果你使用的也是。直接新建页面。看我展示效果即可。
不知道大佬是怎么去重的。我只能展示自己的写法。研究了几个小时。呜呜呜呜。请大佬指教
<template>
<view class="content">
<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
<view class="contHei" @click="dianji(0)">
{{contHei1}}
</view>
<view class="contHei" @click="dianji(1)">
{{contHei2}}
</view>
<view class="contHei" @click="dianji(2)">
{{contHei3}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 按钮的展示数据
contHei1: "全部",
contHei2: "全部",
contHei3: "全部",
// 列选择器的展示数据
maoPage: [],
tiwaiPage: [],
tiaozaoPage: [],
// 是否显示列选择器
show: false,
// 当前点击的是第几级按钮
Ydianji: 0,
// 列选择器的渲染数据 统一.用的是一个列选择器
list: [{
value: '1',
label: '江'
},
{
value: '2',
label: '湖'
}
],
// 模拟数据
heihei: '[{"children":[{"children":[{"dataId":"11","className":"蛔虫"},{"dataId":"13","className":"绦虫"},{"dataId":"10","className":"钩虫"},{"dataId":"8","className":"鞭虫"},{"dataId":"14","className":"心丝虫"}],"className":"体内寄生虫"},{"children":[{"dataId":"15","className":"跳蚤"},{"dataId":"16","className":"蜱虫"},{"dataId":"19","className":"虱子"},{"dataId":"17","className":"耳螨"},{"dataId":"18","className":"疥螨"},{"dataId":"20","className":"蠕形螨"}],"className":"体外寄生虫1"}],"className":"犬","classImg":null},{"children":[{"children":[{"dataId":"21","className":"蛔虫"},{"dataId":"22","className":"绦虫"},{"dataId":"23","className":"钩虫"},{"dataId":"24","className":"心丝虫"}],"className":"体内寄生虫"},{"children":[{"dataId":"26","className":"跳蚤"},{"dataId":"27","className":"蜱虫"},{"dataId":"29","className":"耳螨"},{"dataId":"30","className":"蠕形螨"},{"dataId":"25","className":"背肛螨"},{"dataId":"31","className":"戈托伊蠕形螨"},{"dataId":"32","className":"虱子"}],"className":"体外寄生虫"}],"className":"猫","classImg":null},{"children":[{"children":[{"dataId":"34","className":"绦虫"},{"dataId":"33","className":"球虫"},{"dataId":"35","className":"线虫"}],"className":"体内寄生虫"},{"children":[{"dataId":"36","className":"跳蚤"},{"dataId":"37","className":"蜱虫"},{"dataId":"39","className":"螨虫"},{"dataId":"38","className":"虱子"}],"className":"体外寄生虫"}],"className":"其他","classImg":null}]'
}
},
onLoad() {
this.heihei = JSON.parse(this.heihei);
/ 初始化
/ 初始化
/ 初始化
/ 初始化
/ 初始化
// 列选择器三级联动
this.chushihua();
},
methods: {
chushihua() {
var then = this;
//这三个数组是为了给组件展示数据的 根据筛选条件展示不同数据。我是用push给数组的。所以进来先清空省得堆积数据
then.maoPage = [];
then.tiwaiPage = [];
then.tiaozaoPage = [];
var result = JSON.parse(JSON.stringify(this.heihei));
// 存放二级
var data = [];
// 存放三级
var card = [];
//、、、、、、、、、、、、、、、、
var pppp = {
"className": '全部'
}
// 因为模拟数据里面没有 全部 我公司需要展示全部,所以在整个数据里面新增一个对象 放在最上层
result.unshift(pppp);
result.forEach((item, index) => {
// 因为第一个对象是自己添加的对象,没有二级数据,所以略过第一
if (index != 0) {
// 判断第一个列是否跟数组里面的数据相同
if (then.contHei1 == item.className) {
item.children.forEach(itttt => {
// 相同 就把里面的二级拿出来
data.push(itttt.className);
// 用户初次进入没有选中.默认给第一个 二级按钮展示文字
if (!then.contHei2) {
then.contHei2 = '全部';
}
itttt.children.forEach(itii => {
// 判断二级按钮文字是否跟查找的数据是否相同
if (then.contHei2 == itttt.className) {
// 拿到三级列选择器数据
card.push(itii.className)
}else{
// 判断 二级按钮文字是否是全部 是 就拿所有的
if(then.contHei2=='全部'){
card.push(itii.className)
}
}
})
})
} else {
// 如果不相同,还要判断下第一个列 是否是全部,如果是在去push第二层跟第三层数据，避免拿错了第二层跟第三层数据
if (then.contHei1 == '全部') {
// 一级按钮是全部的情况下,拿所有的二级数据
item.children.forEach(itttt => {
// 把所有的第二层全部push进一个空数组,稍后进行去重
data.push(itttt.className);
// 用户初次进入没有选中.默认给第一个 二级按钮展示文字
if (!then.contHei2) {
then.contHei2 = '全部';
}
// 此时一级按钮是全部查找 判断二级按钮是不是全部 不是就拿对应的三级
// 判断二级按钮是否跟数组里面的二级相同 相同就拿对应的三级
if(then.contHei2 == itttt.className){
itttt.children.forEach(itii => {
// 获取对应的三级数据 稍后进行去重
card.push(itii.className)
})
}else{
// 如果不相同.判断二级按钮是不是全部 如果不是就判断二级是否是全部 避免三级列展示数据重复
if(then.contHei2=='全部'){
// 此时走到这一步就说明 一级按钮 二级按钮都是全部 我们就获取所有的三级数据.稍后进行去重
itttt.children.forEach(itii => {
card.push(itii.className)
})
}
}
})
}
}
}
//注意！！！！ 此时还没有一级列选择器展示的数据。我们需要定义好列选择器所需要的键 放置数据 最后push进列选择器载体
//！！！！！！一级选择器不需要去重
var data2 = {
"label": item.className,
"value": index,
}
then.maoPage.push(data2);
})
// 用户初次进入没有选中.默认给第一个 一级 一级不需要去重
if (!then.contHei1) {
then.contHei1 = then.maoPage[0].label;
}
// 二级数据去重
data = ([...new Set(data)]);
//二级数据本身没有全部这个字段 在顶部添加一个全部
data.unshift('全部');
// 将数据按照list，也就是列选择器所需要的字段来拼接
data.forEach((item, index) => {
var data2 = {
"label": item,
"value": index,
}
// 生成二级列表
then.tiwaiPage.push(data2);
})
// 三级去重
card = ([...new Set(card)]);
//三级数据本身没有全部这个字段 在顶部添加一个全部
card.unshift('全部');
// 将数据按照list，也就是列选择器所需要的字段来拼接
card.forEach((item, index) => {
var data2 = {
"label": item,
"value": index,
}
// 生成三级列表
then.tiaozaoPage.push(data2);
})
// 用户初次进入没有选中.默认给第一个 三级
if (!then.contHei3) {
then.contHei3 = then.tiaozaoPage[0].label;
}
},
// 按钮点击事件 判断是第几个按钮被点击 记录一下
dianji(e) {
this.show = true;
// console.log(e);
this.Ydianji = e;
if (e == 0) {
this.list = this.maoPage;
} else if (e == 1) {
this.list = this.tiwaiPage;
} else {
this.list = this.tiaozaoPage;
}
},
// 当列选择器弹出 点击了确认之后触发的事件
// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
confirm(e) {
var then = this;
// 避免点击的是重复的 可不作任何操作
if (then.contHei1 != e[0].label) {
// 最后判断点击的是第几层的按钮 一二层按钮 对下级按钮层清空.最后会在初始化时添加上 保证上层数据发生变化时 下层数据展示第一条
if (this.Ydianji == 0) { //犬猫
this.contHei1 = e[0].label;
this.contHei2 = "";
this.contHei3 = "";
this.chushihua();
} else if (this.Ydianji == 1) { //体内体外
this.contHei2 = e[0].label;
this.contHei3 = "";
this.chushihua();
} else if (this.Ydianji == 2) { //病例
this.contHei3 = e[0].label;
}
}
},
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.contHei {
width: 30%;
height: 70rpx;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid gray;
}
</style>
585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
