uniapp 小程序多列联动多选组件推荐

对于 uniapp 小程序的多列联动多选组件推荐，我可以给你几个建议：

1.使用 vant-weapp 的多列选择器组件，并结合自己的业务需求进行二次封装。

2.使用 uview-ui 的多列选择器组件，并结合自己的业务需求进行二次封装。

3.使用 taro-ui 的多列选择器组件，并结合自己的业务需求进行二次封装。

以上三个组件库都是比较流行的 UI 组件库，都提供了多列选择器组件，可以根据自己的需求进行选择和使用。如果以上组件都不符合你的需求，也可以自己编写多列联动多选组件。

相关问题

uniapp左右联动商品分类可多选

UniApp是一个基于Vue.js的跨平台应用开发框架，它允许开发者构建一次，运行在多个平台上，包括Web、iOS、Android等。关于左右联动的商品分类多选功能，这种设计通常用于电商类项目中，用户可以同时选择左侧分类和右侧的具体商品。

在UniApp中实现这样的功能，你可以通过以下几个步骤：

1. **HTML结构**：创建两个下拉框组件（select或picker），分别代表左侧的分类和右侧的商品列表，通过`v-model`绑定数据到对应的变量上。

<template>
  <div>
    <el-select v-model="leftCategory" placeholder="请选择左侧分类">
      <!-- 左侧分类选项 -->
    </el-select>

    <el-picker-column v-model="selectedItems" :options="rightGoods" placement="bottom-end" />
  </div>
</template>

2. **数据管理**：在data里定义左边分类的数据以及右边商品列表的初始状态，例如 `leftCategoryOptions` 和 `rightGoods`。

export default {
  data() {
    return {
      leftCategory: '',
      leftCategoryOptions: [
        // 分类选项
      ],
      rightGoods: [], // 初始化为空的右侧商品数组
    };
  }
}

3. **联动逻辑**：当左侧分类发生变化时，动态加载或过滤右侧商品，这可以通过计算属性或methods里的函数来实现。

 computed: {
   filteredGoods() {
     if (this.leftCategory) {
       return this.rightGoods.filter(good => good.category === this.leftCategory);
     } else {
       return this.rightGoods;
     }
   },
 }

methods: {
  handleLeftChange(value) {
    this.selectedItems = [];
    this.rightGoods = this.filteredGoods; // 更新右侧商品
  }
}

4. **事件监听**：给左侧下拉框添加`change`事件监听，每当用户选择一个新的分类，就会触发`handleLeftChange`方法。

通过上述步骤，你就实现了 UniApp 中左右联动的商品分类多选功能。用户可以在左侧选择分类的同时查看相应分类下的商品列表。

uniapp 小程序如何使用uview 进行封装多选多列联动选择器，可以自定义数据

好的，下面是一个使用 uview-ui 多列选择器组件进行二次封装的示例，可以自定义数据：

<template>
  <u-popup v-model="showPicker" position="bottom" :overlay="true">
    <view>
      <u-picker-view :value="selectedValues" @change="onPickerChange">
        <u-picker-view-column v-for="(column, index) in columns" :key="index">
          <view v-for="(item, i) in column" :key="i">
            <u-checkbox v-model="item.checked">
              {{ item.label }}
            </u-checkbox>
          </view>
        </u-picker-view-column>
      </u-picker-view>
      <u-button type="primary" @click="confirm">确定</u-button>
    </view>
  </u-popup>
</template>

<script>
  export default {
    props: {
      columnsData: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        showPicker: false,
        selectedValues: [],
        columns: []
      }
    },
    mounted() {
      this.initColumns()
    },
    methods: {
      initColumns() {
        this.columns = this.columnsData.map(column => {
          return column.map(item => {
            return {
              label: item.label,
              checked: false
            }
          })
        })
      },
      onPickerChange(e) {
        this.selectedValues = e.detail.value
      },
      confirm() {
        const selectedLabels = this.selectedValues.map((value, index) => {
          return this.columnsData[index][value].label
        })
        this.showPicker = false
        this.$emit('change', selectedLabels)
      }
    }
  }
</script>

在这个示例中，我们使用了 u-popup、u-picker-view、u-picker-view-column 和 u-checkbox 组件来构建一个多列联动多选选择器。它接收一个 columnsData 数组作为参数，每个元素代表一列数据，每个元素包含 label 和 checked 两个属性，分别表示选项的文本和是否被选中。通过 u-checkbox 组件来实现多选功能。

组件内部使用了 columns 数组来存储每列的数据，使用 selectedValues 数组来存储每列选中的值的索引。在初始化时，通过 initColumns 方法来将 columnsData 转换成 columns 数组。在选择变化时，通过 onPickerChange 方法来更新 selectedValues 数组。在点击确定按钮时，通过 emit 方法将选中的值传递给父组件。

这是一个简单的示例，你可以根据自己的业务需求进行修改和扩展。希望对你有所帮助！