使用row+text实现自定义表格怎么去除单元格间的双重框线 HarmonyOS 鸿蒙Next

使用onAreaChange事件监听每一列首列区域变化，用rowHeight数组记录首列行高，每一行后面的单元格都需要设置其高度为首列的行高大小。 完整修改代码如下：

@Extend(Text)
function tableTextStyle() {
  .fontSize('8fp')
  .fontColor(Color.White)
  .textAlign(TextAlign.Center)
  .constraintSize({ minHeight: 18 })
  .width('100%')
}

interface vaccItem {
  name: string,
  allDate: dateItem[]
}
interface dateItem {
  vaccSeq: number,
  date: string
}
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State rowHeight: Length[] = []
  @State vaccList: vaccItem[] = [{
    name: '卡介苗',
    allDate: [{
      vaccSeq: 1,
      date: '2016-06-30'
    }]
  }, {
    name: '麻腮风疫苗',
    allDate: [{
      vaccSeq: 2,
      date: '2016-06-30'
    }]
  }, {
    name: '甲肝疫苗 (减毒)',
    allDate: [{
      vaccSeq: 3,
      date: '2016-06-30'
    }]
  }, {
    name: '脊灰疫苗',
    allDate: [{
      vaccSeq: 4,
      date: '2016-06-30'
    }]
  }, {
    name: 'A+C群流脑 疫苗(多糖)A+C群流脑 疫苗(多糖)',
    allDate: [{
      vaccSeq: 5,
      date: '2016-06-30'
    }]
  }];

  build() {
    Stack() {
      Column() {
        this.TableBuild()
        // this.BottomBtn()
      }.width('100%').height('100%')
    }
    .alignContent(Alignment.TopStart)
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Gray)
  }

  // 个案信息
  @Builder
  TableBuild() {
    Column() {
      Row() {
        Text('疫苗名称').tableTextStyle().width('14%').height(36).borerTRStyle()
        Column() {
          Text('接种完成情况').tableTextStyle().borerTRStyle()
          Row() {
            Text('第一剂').tableTextStyle().width('25%').borerTRStyle()
            Text('第二剂').tableTextStyle().width('25%').borerTRStyle()
            Text('第三剂').tableTextStyle().width('25%').borerTRStyle()
            Text('第四剂').tableTextStyle().width('25%').borerTRStyle()
          }
        }.width('43%')
        Column() {
          Text('补种完成情况').tableTextStyle().borerTRStyle()
          Row() {
            Text('第一剂').tableTextStyle().width('25%').borerTRStyle()
            Text('第二剂').tableTextStyle().width('25%').borerTRStyle()
            Text('第三剂').tableTextStyle().width('25%').borerTRStyle()
            Text('第四剂').tableTextStyle().width('25%').borerTRStyle()
          }
        }.width('43%')
      }
      .border({ width: {left: 0.5, bottom: 0.5}, color: Color.White })
      .backgroundColor(Color.Green)

      ForEach(this.vaccList, (item: vaccItem, index: number) => {
        this.TableRow(item,index)
      })
    }
  }

  @Builder
  TableRow(item: vaccItem, index: number) {
    Row() {
      Text(item.name).tableTextStyle().width('14%').borerTRStyle()
        .onAreaChange(( oldValue: Area, newValue: Area ) => {
          this.rowHeight[index] = newValue.height
        })
      Row() {
        ForEach([1, 2, 3, 4, 5, 6, 7, 8], (item2: number) => {
          if(item?.allDate[0]?.vaccSeq === item2) {
            Text(item.allDate[0].date).tableTextStyle().width('12.5%').borerTRStyle()
              .height(this.rowHeight[index])
          } else {
            Text('').tableTextStyle().width('12.5%').borerTRStyle()
              .height(this.rowHeight[index])
          }
        })
      }.width('86%')
    }
    .border({ width: {left: 0.5, bottom: 0.5}, color: Color.White })
    .backgroundColor(Color.Green)
  }

  @Styles
  borerTRStyle() {
    .border({ width: {right: 0.5, top: 0.5}, color: Color.White })
  }
}