HarmonyOS 级联选择器

项目链接：https://gitee.com/hyhe/cascade-selector.git

一、项目介绍

适用地址选择等多级选择功能，demo支持六层。

1、效果图展示

cascadeSelector.png

2、文件介绍

cascadeSelectorFile.png

二、选择器调用示例

1、数据模拟

initData() {
    this.datas = [
      { code: "1", name: "1", isSelected: true, selectIndex: 0, subModels: [
        { code: "1", name: "1", isSelected: true, selectIndex: 0, subModels: [
          { code: "1", name: "1", isSelected: true, selectIndex: 0, subModels: [
            { code: "1", name: "1", isSelected: true, selectIndex: 0, subModels: [
              { code: "1", name: "1", isSelected: true, selectIndex: 0, subModels: [
                { code: "1", name: "1", isSelected: true, selectIndex: 0, subModels: []}
              ]}
            ]}
          ]},
          {
            code: "2", name: "2", isSelected: false, selectIndex: 1, subModels: [
              { code: "2", name: "2", isSelected: false, selectIndex: 1, subModels: [
                { code: "2", name: "2", isSelected: false, selectIndex: 1, subModels: []}
              ]}
            ]
          },
          {
            code: "3", name: "3", isSelected: false, selectIndex: 2, subModels: [
              {
                code: "3", name: "3", isSelected: false, selectIndex: 2, subModels: [
                  { code: "3", name: "3", isSelected: false, selectIndex: 2, subModels: [
                    { code: "3", name: "3", isSelected: false, selectIndex: 2, subModels: []}
                  ]}
                ]
              }
            ]
          }
        ]},
      ]}
    ]
  }

2、选择器调用示例

Stack() {
        Column(){
          Text(JSON.stringify(this.selectDatas)).fontSize(26).fontColor(BlackColor).width("100%").height(50).textAlign(TextAlign.Center)
        }.width("100%").height("100%").backgroundColor(OrangeColor).zIndex(1)
          .onClick(() => {
            this.alertZIndex = 99
          })
        BaseCascadeSelector({ models: this.datas, headerModels: this.selectDatas, alertZIndex: this.alertZIndex, listItemBuilder:(item: BaseCascadeSelectorModel, pageIndex: number, itemIndex: number, tapCallBack: () => void) => {this.setListItem(item, pageIndex, itemIndex, () => {
          console.log("click")
          tapCallBack()
        })}, returnSelectDatasClosure: (selectDatas: BaseCascadeSelectorModel[]) => {
          this.selectDatas = selectDatas
        }}).zIndex(this.alertZIndex)
      }

三、BaseCascadeSelector选择器介绍

1、根据头部数据获取当前页要展示的数据

getCurrentPageDatas(index: number): Array<BaseCascadeSelectorModel> {
    if (index > this.headerModels.length) {
      return []
    }
    if (index === 0) {
      return this.models ?? []
    } else if (index == 1) {
      let selectIndex = this.headerModels[0].selectIndex ?? 0
      return this.models[selectIndex].subModels
    } else if (index == 2) {
      let selectIndexFirst = this.headerModels[0].selectIndex ?? 0
      let selectIndexSecond = this.headerModels[1].selectIndex ?? 0
      return this.models[selectIndexFirst]?.subModels[selectIndexSecond].subModels
    } else if (index == 3) {
      let selectIndexFirst = this.headerModels[0].selectIndex ?? 0
      let selectIndexSecond = this.headerModels[1].selectIndex ?? 0
      let selectIndexThree = this.headerModels[2].selectIndex ?? 0
      return this.models[selectIndexFirst].subModels[selectIndexSecond].subModels[selectIndexThree].subModels
    } else if (index == 4) {
      let selectIndexFirst = this.headerModels[0].selectIndex ?? 0
      let selectIndexSecond = this.headerModels[1].selectIndex ?? 0
      let selectIndexThree = this.headerModels[2].selectIndex ?? 0
      let selectIndexFourth = this.headerModels[3].selectIndex ?? 0
      return this.models[selectIndexFirst].subModels[selectIndexSecond].subModels[selectIndexThree].subModels[selectIndexFourth].subModels ?? []
    } else if (index == 5) {
      let selectIndexFirst = this.headerModels[0].selectIndex ?? 0
      let selectIndexSecond = this.headerModels[1].selectIndex ?? 0
      let selectIndexThree = this.headerModels[2].selectIndex ?? 0
      let selectIndexFourth = this.headerModels[3].selectIndex ?? 0
      let selectIndexFifth = this.headerModels[4].selectIndex ?? 0
      return this.models[selectIndexFirst].subModels[selectIndexSecond].subModels[selectIndexThree].subModels[selectIndexFourth].subModels[selectIndexFifth].subModels ?? []
    } else {
      return []
    }
  }

2、列表某项选中后当前页数据

dealResult(pageIndex: number, itemIndex: number) {
    let newModels: Array<BaseCascadeSelectorModel> = []
    if (pageIndex == 0) {
      newModels = this.models
    } else if (pageIndex == 1) {
      newModels = this.models[this.headerModels[0].selectIndex].subModels
    } else if (pageIndex == 2) {
      newModels = this.models[this.headerModels[0].selectIndex].subModels[this.headerModels[1].selectIndex].subModels
    } else if (pageIndex == 3) {
      newModels = this.models[this.headerModels[0].selectIndex].subModels[this.headerModels[1].selectIndex].subModels[this.headerModels[2].selectIndex].subModels
    } else if (pageIndex == 4) {
      newModels = this.models[this.headerModels[0].selectIndex].subModels[this.headerModels[1].selectIndex].subModels[this.headerModels[2].selectIndex].subModels[this.headerModels[3].selectIndex].subModels
    } else {
      newModels = this.models[this.headerModels[0].selectIndex].subModels[this.headerModels[1].selectIndex].subModels[this.headerModels[2].selectIndex].subModels[this.headerModels[3].selectIndex].subModels[this.headerModels[4].selectIndex].subModels
    }
    this.dealItemSelect(newModels, pageIndex, itemIndex)
  }

3、列表选中某项后，header显示数据和当前页及后续页数据处理

dealItemSelect(newModels: Array<BaseCascadeSelectorModel>, pageIndex: number, itemIndex: number) {
    let newSelectModels: BaseCascadeSelectorModel[] = this.headerModels.slice(0, pageIndex)
    if (newModels.length == 0) {
      newSelectModels = newSelectModels.slice(0, pageIndex)
      this.headerModels = newSelectModels
    } else {
      newModels.forEach((model, index) => {
        model.selectIndex = itemIndex
        if (index == itemIndex) {
          if (model.subModels.length > 0) {
            this.currentPageIndex = pageIndex + 1
          }
          model.isSelected = true
          newSelectModels[pageIndex] = model
        } else {
          model.isSelected = false
        }
        this.dealSubModels(model.subModels)
      })
      if (newModels[0].subModels.length > 0) {
        let newModel = new BaseCascadeSelectorModel()
        newModel.code = ""
        newModel.isSelected = true
        newModel.selectIndex = 0
        newModel.name = "请选择"
        newSelectModels.push(newModel)
      }
      this.headerModels = newSelectModels
    }
  }

  // 将后续数据重置为默认值
  dealSubModels(newModels: Array<BaseCascadeSelectorModel>) {
    newModels.forEach((model, index) => {
      model.isSelected = false
      model.selectIndex = 0
      this.dealSubModels(model.subModels)
    })
  }

4、头部选中后数据处理

dealSelectData(pageIndex: number, itemIndex: number) {
    let newModels: Array<BaseCascadeSelectorModel> = []
    if (pageIndex == 0) {
      newModels = this.models[this.headerModels[0].selectIndex].subModels
    } else if (pageIndex == 1) {
      newModels = this.models[this.headerModels[0].selectIndex].subModels[this.headerModels[1].selectIndex].subModels
    } else if (pageIndex == 2) {
      newModels = this.models[this.headerModels[0].selectIndex].subModels[this.headerModels[1].selectIndex].subModels[this.headerModels[2].selectIndex].subModels
    } else if (pageIndex == 3) {
      newModels = this.models[this.headerModels[0].selectIndex].subModels[this.headerModels[1].selectIndex].subModels[this.headerModels[2].selectIndex].subModels[this.headerModels[3].selectIndex].subModels
    } else if (pageIndex == 4) {
      newModels = this.models[this.headerModels[0].selectIndex].subModels[this.headerModels[1].selectIndex].subModels[this.headerModels[2].selectIndex].subModels[this.headerModels[3].selectIndex].subModels[this.headerModels[4].selectIndex].subModels
    } else if (pageIndex == 5) {
      newModels = this.models[this.headerModels[0].selectIndex].subModels[this.headerModels[1].selectIndex].subModels[this.headerModels[2].selectIndex].subModels[this.headerModels[3].selectIndex].subModels[this.headerModels[4].selectIndex].subModels[this.headerModels[5].selectIndex].subModels
    } else {
      newModels = this.models[this.headerModels[0].selectIndex].subModels[this.headerModels[1].selectIndex].subModels[this.headerModels[2].selectIndex].subModels[this.headerModels[3].selectIndex].subModels[this.headerModels[4].selectIndex].subModels[this.headerModels[5].selectIndex].subModels[this.headerModels[6].selectIndex].subModels
    }
    let newSelectModels: BaseCascadeSelectorModel[] = this.headerModels.slice(0, pageIndex)
    if (newModels.length == 0) {
      this.headerModels = newSelectModels
    } else {
      newModels.forEach((model, index) => {
        if (index == itemIndex) {
          model.isSelected = true
          model.selectIndex = itemIndex
        } else {
          model.isSelected = false
        }
        this.dealSubModels(model.subModels)
      })
      let newModel = new BaseCascadeSelectorModel()
      newModel.code = ""
      newModel.isSelected = true
      newModel.name = "请选择"
      newSelectModels[pageIndex] = newModel
      this.headerModels = newSelectModels
    }
  }