<u-cell-group class="list" :border="false"> <u-cell-item :arrow="true" v-for="(child, index2) in child" :key="child.id" @click="navTo('/pages/sys/msg/form')"> <text slot="title" >{{ child.companyName }}</text> </u-cell-item> </u-cell-group> let groups = [...new Set(company2.map(item => item.parentCode))]; let newArr = groups.map(parentCode =>{ let children = company2.filter(item => item.parentCode == parentCode); children.forEach(child => { // 获取当前子项的父项 let parent = company2.find(item => item.parentCode === parentCode); // 将父项的companyName赋值给子项 child.parentName = parent.companyName; }); return children; }); this.child = newArr; console.log(this.child); 如何在text标签里根据夫数组分组显示newArr数组中的子数组的conpanyName

你可以使用 `v-for` 循环渲染 `newArr` 数组中的子数组，并在循环内部使用 `u-cell-group` 和 `u-cell-item` 标签来显示 `companyName`。具体代码如下：

<template>
  <div>
    <u-cell-group :border="false" v-for="(children, index1) in child" :key="index1">
      <div slot="title">{{ children[0].parentName }}</div>
      <u-cell-item v-for="(item, index2) in children" :key="item.id">
        <text>{{ item.companyName }}</text>
      </u-cell-item>
    </u-cell-group>
  </div>
</template>

这样就能按照父数组分组显示子数组的 `companyName` 了。

相关问题

<u-index-list :index-list="indexList"> <template v-for="(item, index) in itemArr"> <!-- #ifdef APP-NVUE --> <u-index-anchor :text="indexList[index]"></u-index-anchor> <!-- #endif --> <u-index-item> <!-- #ifndef APP-NVUE --> <u-index-anchor :text="indexList[index]"></u-index-anchor> <!-- #endif --> <view class="list-cell" v-for="(cell, index) in item"> {{cell}} </view> </u-index-item> </template> </u-index-list>的接口数据的代码实现

根据你提供的代码片段，这是一个使用了 uview-ui 组件库中的 u-index-list 组件，并且根据传入的数据渲染出一个索引列表的组件。

对于接口数据的代码实现，需要先定义一个数据源，例如：

data() {
  return {
    indexList: ['A', 'B', 'C', 'D'], // 索引列表的数据源
    itemArr: [
      [
        'Apple',
        'Aeroplane',
        'Ant'
      ],
      [
        'Banana',
        'Ball',
        'Bat'
      ],
      [
        'Cat',
        'Car',
        'Cup'
      ],
      [
        'Dog',
        'Drum',
        'Doll'
      ]
    ] // 索引列表的每个分组的数据源
  }
}

然后将数据源传入到 u-index-list 组件中，例如：

<u-index-list :index-list="indexList">
  <template v-for="(item, index) in itemArr">
    <u-index-item>
      <view class="list-cell" v-for="(cell, index) in item">
        {{cell}}
      </view>
    </u-index-item>
  </template>
</u-index-list>

在这个例子中，我们传入了一个包含四个分组的数据源，每个分组中包含三个单词，最终渲染出来的索引列表就是：

- A
- Apple
- Aeroplane
- Ant
- B
- Banana
- Ball
- Bat
- C
- Cat
- Car
- Cup
- D
- Dog
- Drum
- Doll

你需要根据你自己的数据结构和业务需求来实现接口数据的逻辑。

<nut-cell title="工作写实" :is-link="true" to="/realistic/list" :show-icon="true" />怎么传值,怎么取值

你可以使用props来传递值，例如：

<!-- 父组件 -->
<template>
  <div>
    <nut-cell :title="title" :is-link="isLink" :show-icon="showIcon" />
  </div>
</template>

<script>
import NutCell from '@/components/NutCell.vue'

export default {
  components: {
    NutCell
  },
  data() {
    return {
      title: '工作写实',
      isLink: true,
      showIcon: true
    }
  }
}
</script>

你可以在子组件中使用props来接收这些值，例如：

<!-- 子组件 NutCell.vue -->
<template>
  <div class="nut-cell">
    <div class="nut-cell__title">{{ title }}</div>
    <div class="nut-cell__right-icon" v-if="showIcon">
      <i class="iconfont icon-right"></i>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    isLink: {
      type: Boolean,
      default: false
    },
    showIcon: {
      type: Boolean,
      default: false
    }
  }
}
</script>

这样就能够在父组件中传递数据给子组件了，子组件可以根据props来渲染自己的内容。对于父组件来说，可以使用computed或者methods来获取子组件的数据，例如：

<!-- 父组件 -->
<template>
  <div>
    <nut-cell ref="cell" :title="title" :is-link="isLink" :show-icon="showIcon" />
    <button @click="handleClick">获取子组件数据</button>
  </div>
</template>

<script>
import NutCell from '@/components/NutCell.vue'

export default {
  components: {
    NutCell
  },
  data() {
    return {
      title: '工作写实',
      isLink: true,
      showIcon: true
    }
  },
  methods: {
    handleClick() {
      const title = this.$refs.cell.title
      const isLink = this.$refs.cell.isLink
      const showIcon = this.$refs.cell.showIcon
      console.log(title, isLink, showIcon)
    }
  }
}
</script>

在这个例子中，我们通过在父组件中给子组件添加ref属性来获取子组件的实例，并且通过访问子组件的属性来获取子组件的数据。