uniapp 小程序多列联动多选组件推荐
时间: 2023-08-03 11:03:20 浏览: 404
对于 uniapp 小程序的多列联动多选组件推荐,我可以给你几个建议:
1.使用 vant-weapp 的多列选择器组件,并结合自己的业务需求进行二次封装。
2.使用 uview-ui 的多列选择器组件,并结合自己的业务需求进行二次封装。
3.使用 taro-ui 的多列选择器组件,并结合自己的业务需求进行二次封装。
以上三个组件库都是比较流行的 UI 组件库,都提供了多列选择器组件,可以根据自己的需求进行选择和使用。如果以上组件都不符合你的需求,也可以自己编写多列联动多选组件。
相关问题
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 方法将选中的值传递给父组件。
这是一个简单的示例,你可以根据自己的业务需求进行修改和扩展。希望对你有所帮助!
小程序三级联动可多选
很抱歉,小程序的picker组件是不支持多选的。它只能用来创建一个从底部弹起的滚动选择器,用于单选的情况。\[3\]所提到的mode="multiSelector"是用来声明创建的是多列选择器,而不是多选选择器。如果需要实现多选功能,你可能需要自己编写自定义组件或者使用其他第三方插件来实现。
#### 引用[.reference_title]
- *1* [微信小程序 自定义三级联动](https://blog.csdn.net/weixin_44201361/article/details/125103682)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [小程序:动态数据实现三级联动选择器](https://blog.csdn.net/weixin_34292924/article/details/87956377)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]