uniapp uses uni-data-picker cascade selector, multi-level selection, customized display
First check whether the effect is what you want.
Page components
<uni-data-picker placeholder="请选择"
v-model="jiduvalue"
:localdata="jidurange"
@change="changejidu"
:step-searh="false"
:preload="true">
</uni-data-picker>
interface data
jiduvalue:0,
jidurange: [],
data: [
{
year: '2022',
value: 1,
children: [
{
name: '2022秋季', value: 1.1, cjsysid: '' },
{
name: '2022夏季', value: 1.2, cjsysid: '' },
],
},
{
year: '2023',
value: 2,
children: [
{
name: '2023秋季', value: 2.1, cjsysid: '' },
{
name: '2023夏季', value: 2.2, cjsysid: '' },
],
},
]
Interface data and processing methods
<----------------------------------------------->
数据处理
console.log(res.data.data)
let fenji = res.data.data
_this.jidurange = fenji.map((item, index) => ({
text: item.year,
value: index + 1,
children: item.children.map((child, childIndex) => ({
text: child.name,
value: parseFloat(`${
index + 1}.${
childIndex + 1}`),
cjsysid: child.sysid
}))
}));
Data processing after selection to get the selected value
changejidu(e){
console.log(e.detail.value)
const selec = e.detail.value[1].text
const matchedObject = this.jidurange.find(obj =>
obj.children.find(fruit => fruit.text === selec)
);
const matct = matchedObject.children.find(obj => obj.text === selec);
console.log(matct); // 选中的值
}