uniapp官方组件
uniapp给定了五种模式
普通选择器，时间选择器，日期选择器，省市区选择器，多列选择器
官方文档省市区选择器不适用5+app、h5和支付宝小程序，必须适用插件
更多内容大家自己阅读文档

下面就直接上代码

<template>
	<view class="content">
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" mode=selector :value="index" :range="coname">
						<view class="picker_box">
							<view class="text">一级分类</view>
						<view class="uni-input"
						{{conameName}}
						</view>
						</view>
						
					</picker>
					<picker @change="bindPickerChangeTwo" mode=selector :value="indexTwo" :range="conameTwo">
						<view class="picker_box">
							<view class="text">一级分类</view>
						<view class="uni-input">
						{{conameName_two}}
						</view>
						</view>
					</picker>
					<picker @change="bindPickerChange" mode=selector disabled :value="indexthree" :range="congread">
						<view class="picker_box">
							<view class="text">分数</view>
						<view class="uni-input">{{grade}}</view>
						</view>
					</picker>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mer from "../../api/mer/mer.js"

	export default {
		data() {
			return {
				// 全部数据
				contentList: [],
				// 一级分类数据
				coname: [],
				// 二级分类所有数据
				contentListTwo: [],
				// 二级分类部分数据
				conameTwo: [],
				index: 0,
				indexTwo: 0,
				indexthree:0,
				// 二级分类id
				conameTwo_id: "",
				// 各项分数
				congread: [],
				// 一级选项名字
				conameName: "",
				// 二级选项名字
				conameName_two:"",
				// 三级分类的分数
				grade:''
			}
		},
		onLoad() {
			this.getcascade()
		},
		methods: {
			// 获取数据
			getcascade() {
				mer.getAllContent().then(res => {
					this.contentList = res.data.list
					// 拿到一级分类  给到this.coname
					this.coname = this.contentList.map(item => {
						return item.coname
					})
				})
			},
			bindPickerChange(e) {
				// 如果切换清空第二层和第三层选择器
				this.conameName_two="",
				this.grade=""
				// 返回的id是数字，但是filter只能筛选字符串 所以把数字转化为字符串
				var id = e.detail.value.toString()
				let obj1 = this.contentList.filter(item => item.id === id)
				// 将二级分类数据
				this.contentListTwo = obj1[0].contentwoVoList
				// 把二级分类所有的coname拿到
				this.conameTwo = this.contentListTwo.map(item => {
					return item.coname
				})
				// 筛选某一项的名字
				this.conameName = this.contentList.filter(a => a.id == e.detail.value)[0].coname
				
			},
			bindPickerChangeTwo(e) {
				// 清空数组
				this.congread = []
				this.indexTwo = e.detail.value
				let obj2 = this.contentListTwo[e.detail.value];
				// 第二层分类的名字
				this.conameName_two=obj2.coname
				// 三级分类的分数
				this.grade = obj2.conGread
				// console.log(this.grade)
				// 将分数追加到congread数组里
				this.congread.push(obj2.conGread);
				
			}

		}
	}
</script>

<style lang="scss">
	.content {
		.uni-list {
			.uni-list-cell {
				.uni-list-cell-db {
					.picker_box {
						margin-top: 20rpx;
						display: flex;
						height: 90rpx;
						background-color: #fff;
						justify-content: space-between;
						align-items: center;
						padding: 0 25rpx;
						color: #666363;
						
						.text {
							display: flex;
							flex-shrink: 0;
						}
						.uni-input {
							
						}
					}
				}
			}
		}
	}
</style>

效果图如下

如果这篇文章对你有帮助，那就点个赞哦！！