uniapp 车型选择器组件示例 - 简洁易用

<template>
  <view class='container'>
    <view class='title'>请选择车型</view>
    <picker mode='multiSelector' :value='value' :range='range' @change='onChange'>
      <view class='picker'>{{selectedText}}</view>
    </picker>
  </view>
</template>
<script>
export default {
  data() {
    return {
      value: [0, 0, 0],
      range: [],
      selectedText: '',
      carData: [
        {
          name: '品牌1',
          children: [
            {
              name: '车系1',
              children: [
                { name: '车型1' },
                { name: '车型2' }
              ]
            },
            {
              name: '车系2',
              children: [
                { name: '车型3' },
                { name: '车型4' }
              ]
            }
          ]
        },
        {
          name: '品牌2',
          children: [
            {
              name: '车系3',
              children: [
                { name: '车型5' },
                { name: '车型6' }
              ]
            },
            {
              name: '车系4',
              children: [
                { name: '车型7' },
                { name: '车型8' }
              ]
            }
          ]
        }
      ]
    }
  },
  onReady() {
    this.initPickerData()
  },
  methods: {
    initPickerData() {
      let range = []
      for (let i = 0; i < this.carData.length; i++) {
        let item1 = this.carData[i]
        let children1 = item1.children
        let arr1 = []
        for (let j = 0; j < children1.length; j++) {
          let item2 = children1[j]
          let children2 = item2.children
          let arr2 = []
          for (let k = 0; k < children2.length; k++) {
            let item3 = children2[k]
            arr2.push(item3.name)
          }
          arr1.push({
            name: item2.name,
            values: arr2
          })
        }
        range.push({
          name: item1.name,
          values: arr1
        })
      }
      this.range = range
      this.selectedText = this.range[0].name + ' ' + this.range[0].values[0].name + ' ' + this.range[0].values[0].values[0]
    },
    onChange(e) {
      let value = e.detail.value
      this.value = value
      let selectedText = ''
      for (let i = 0; i < value.length; i++) {
        let rangeItem = this.range[i]
        let rangeItemValue = rangeItem.values[value[i]]
        selectedText += rangeItemValue.name + ' '
        if (rangeItemValue.values) {
          selectedText += rangeItemValue.values[this.value[i + 1]] + ' '
        }
      }
      this.selectedText = selectedText
    }
  }
}
</script>
<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.title {
  font-size: 24px;
  margin-bottom: 20px;
}
.picker {
  font-size: 18px;
  color: #333;
  text-align: center;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 80%;
}
</style>
<p>这个示例中，我们首先在<code>data</code>中定义了<code>value</code>、<code>range</code>和<code>selectedText</code>三个属性。其中，<code>value</code>表示当前选择的值，<code>range</code>表示选择器的数据源，<code>selectedText</code>表示当前选择的文本。</p>
<p>在<code>onReady</code>生命周期中，我们调用了<code>initPickerData</code>方法，用于初始化选择器的数据源。在<code>initPickerData</code>方法中，我们遍历车型数据，将其转换为<code>range</code>所需的格式。</p>
<p>在<code>onChange</code>方法中，我们通过<code>e.detail.value</code>获取当前选择的值，然后遍历<code>range</code>，根据选择的值获取对应的文本，最后将文本赋值给<code>selectedText</code>。</p>
<p>最后，在模板中，我们使用<code>picker</code>组件来展示选择器，并绑定相应的属性和事件。同时，我们还展示了当前选择的文本。</p>