uniapp使用uview 二次封装多列多选选择器

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

<template>
  <view>
    <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>
    <u-input :value="selectedLabels.join(',')" @click="showPicker = true" disabled></u-input>
  </view>
</template>

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

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

组件内部使用了 selectedValues 数组来存储每列选中的值的索引，使用 selectedLabels 数组来存储每列选中的值的文本。在初始化和选择变化时，通过 updateSelectedLabels 方法来更新 selectedLabels 数组。在点击确定按钮时，通过 emit 方法将选中的值传递给父组件。

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