uni-app 万人血书请求<uni-data-picker>加入多选功能

uni-app 万人血书请求<uni-data-picker>加入多选功能

万人血书请求<uni-data-picker>加入多选功能,加入类似element-plus的级联多选功能

6 回复

同上+++

更多关于uni-app 万人血书请求<uni-data-picker>加入多选功能的实战教程也可以访问 https://www.itying.com/category-93-b0.html


什么时候能加上啊

这个组件实在鸡肋，但又找不到其它更好的，没有逐级懒加载、只能选中叶、不能多选…，希望官方完善啊

+10086

可以找找插件市场，应该又类似的

了解您的需求后，虽然uni-app官方组件库中的<uni-data-picker>目前暂未直接支持多选功能，但我们可以通过自定义组件的方式来实现类似的效果。以下是一个简要的实现思路和代码示例，以帮助您实现多选功能。

实现思路

  1. 创建自定义组件：创建一个新的组件，用于展示数据选择列表，并支持多选。
  2. 数据绑定：通过Vue的数据绑定机制，将选中的值传递给父组件。
  3. 样式与交互：为选中的项添加特定的样式，并处理用户的点击事件以实现多选和取消选择。

代码示例

自定义组件：MultiSelectPicker.vue

<template>
  <view class="picker-container">
    <view v-for="(item, index) in data" :key="index" @click="toggleSelection(index)" :class="{selected: isSelected(index)}">
      {{ item.name }}
    </view>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectedIndices: new Set(this.value)
    };
  },
  watch: {
    value(newVal) {
      this.selectedIndices = new Set(newVal);
    },
    selectedIndices(newVal) {
      this.$emit('input', newVal.values());
    }
  },
  methods: {
    toggleSelection(index) {
      if (this.selectedIndices.has(index)) {
        this.selectedIndices.delete(index);
      } else {
        this.selectedIndices.add(index);
      }
    },
    isSelected(index) {
      return this.selectedIndices.has(index);
    }
  }
};
</script>

<style scoped>
.picker-container {
  /* 样式定义 */
}
.selected {
  /* 选中项的样式 */
  background-color: #007aff;
  color: white;
}
</style>

使用自定义组件

在您的页面中引入并使用该组件：

<template>
  <view>
    <multi-select-picker :data="pickerData" v-model="selectedData"></multi-select-picker>
  </view>
</template>

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

export default {
  components: {
    MultiSelectPicker
  },
  data() {
    return {
      pickerData: [
        {name: 'Option 1'},
        {name: 'Option 2'},
        {name: 'Option 3'}
      ],
      selectedData: []
    };
  }
};
</script>

通过上述代码，您可以实现一个支持多选功能的自定义数据选择器。您可以根据实际需求进一步定制和优化组件的样式和功能。

回到顶部