TextPicker 实现省市区联动问题 3列数据变成2列的时候有问题,2列时第3列数据不会变
demo:
@Entry
@Component
struct Index {
@State data: TextCascadePickerRangeContent[] = []
@State selected: number | number[] = []
aboutToAppear(): void {
this.data = [
{
text: '北京',
children: [{
text: '朝阳区',
children:[
{text: ''}
]
}, {
text: '海淀区',
children:[
{text: ''}
]
}, {
text: '丰台区',
children:[
{text: ''}
]
}, {
text: '昌平区',
children:[
{text: ''}
]
}, {
text: '通州区',
children:[
{text: ''}
]
}]
},
{
text: '广东',
children: [{
text: '广州',
children: [{
text: '萝岗区'
}, {
text: '荔湾区'
}, {
text: '越秀区'
}, {
text: '海珠区'
}]
}, {
text: '广州',
children: [{
text: '福田区'
}, {
text: '南山区'
}, {
text: '宝安区'
}, {
text: '龙岗区'
}]
}, {
text: '佛山',
children: [{
text: '市辖区'
}, {
text: '禅城区'
}, {
text: '南海区'
}, {
text: '顺德区'
}]
}]
}
]
this.selected = [1,0,0]
}
@Builder
buildTextPicker() {
TextPicker({
range: this.data,
selected: this.selected
})
.divider({
strokeWidth: 1,
startMargin: 0,
endMargin: 0,
color: '#1A000000'
})
.flexGrow(1)
.textStyle({
color: '#4C000000',
font: {
size: 15,
weight: FontWeight.Regular
}
})
.selectedTextStyle({
color: '#FF26273C',
font: {
size: 18,
weight: FontWeight.Regular
}
})
.canLoop(false)
.onChange((value, index) => {
this.selected = index
})
}
build() {
Column({space: 12}) {
this.buildTextPicker()
Button('选择中1')
.fontSize(15)
.width(200)
.height(44)
.onClick(() => {
this.selected = [1,0,0]
})
Button('选择中2')
.fontSize(15)
.width(200)
.height(44)
.onClick(() => {
this.selected = [0,0,0]
})
}
.width('100%')
.height("100%")
.justifyContent(FlexAlign.Start)
.alignItems(HorizontalAlign.Center)
}
}
TextPicker的数据列表range的类型及列数不可以动态修改。因此,无法实现三列数据转换成两列数据。使用索引进行跳转时,若第三列数据为空,则不进行变动