uni-app 级联选择器（可设置每一级的前置图片（头像））

在uni-app中实现一个带有前置图片（头像）的级联选择器，可以通过自定义组件来实现。下面是一个简单的代码示例，展示如何实现这个功能。

首先，我们创建一个自定义组件CascaderWithAvatar.vue：

<template>
  <view class="cascader-container">
    <view v-for="(level, index) in levels" :key="index" class="level">
      <view v-for="(item, idx) in level" :key="idx" class="item">
        <image :src="item.avatar" class="avatar"></image>
        <text>{{ item.label }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    levels: {
      type: Array,
      required: true
    }
  },
  methods: {
    // 可以添加选择、展开/收缩等方法
    selectItem(levelIndex, itemIndex) {
      console.log(`Selected item at level ${levelIndex}, index ${itemIndex}`, this.levels[levelIndex][itemIndex]);
    }
  }
};
</script>

<style>
.cascader-container {
  padding: 10px;
}
.level {
  margin-bottom: 10px;
}
.item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}
</style>

接下来，在你的页面中使用这个组件，并传递数据：

<template>
  <view>
    <CascaderWithAvatar :levels="cascaderData" />
  </view>
</template>

<script>
import CascaderWithAvatar from '@/components/CascaderWithAvatar.vue';

export default {
  components: {
    CascaderWithAvatar
  },
  data() {
    return {
      cascaderData: [
        [
          { label: 'Level 1 - Item 1', avatar: '/static/avatar1.png' },
          { label: 'Level 1 - Item 2', avatar: '/static/avatar2.png' }
        ],
        [
          { label: 'Level 2 - Item 1', avatar: '/static/avatar3.png' },
          { label: 'Level 2 - Item 2', avatar: '/static/avatar4.png' }
        ]
      ]
    };
  }
};
</script>

在这个例子中，CascaderWithAvatar组件接收一个levels属性，它是一个二维数组，每个子数组代表一级，每个子数组的元素是一个对象，包含label（显示的文本）和avatar（头像图片的URL）。

你可以根据需要扩展这个组件，比如添加点击事件来响应选择，或者添加逻辑来处理多级展开和收缩。这个基础示例提供了一个带有前置图片的级联选择器的框架，你可以根据具体需求进一步定制。