• vant实现Select效果--单选和多选

    vue项目无论是用element中的Select选择器，还是使用公司维护的组件，都可以轻松实现单选和多选的需求，但在移动端使用vant时，找了几遍发现居然没有提供Select组件，下面提供对单选和多选组件的封装。

    单选效果：

    多选效果：

     

     1、封装单选组件（VanFieldSelectPicker）

    1. <template>
    2.   <div class="dh-field">
    3.     <div class=" van-hairline--bottom">
    4.       <van-field
    5.         v-model="resultLabel"
    6.         v-bind="$attrs"
    7.         readonly
    8.         :is-link="$attrs.disabled === undefined"
    9.         input-align="right"
    10.         error-message-align='right'
    11.         class="dh-cell"
    12.         @click="showPopu($attrs.disabled)"
    13.       />
    14.       <van-popup v-model="show" position="bottom">
    15.         <van-field v-if="isSearch" v-model="searchVal" input-align="left" placeholder="搜索" @input="search"/>
    16.         <van-picker
    17.           v-bind="$attrs"
    18.           :columns="columnsData"
    19.           show-toolbar
    20.           @cancel="cancel"
    21.           @confirm="onConfirm"
    22.           @change="change"
    23.           :value-key="this.option.label"
    24.         />
    25.       van-popup>
    26.     div>
    27.   div>
    28. template>
    29.  
    30. <script>
    31. export default {
    32.   name: 'VanFieldSelectPicker',
    33.   model: {
    34.     prop: 'selectValue'
    35.   },
    36.   props: {
    37.     columns: {
    38.       type: Array,
    39.       default: function () {
    40.         return []
    41.       }
    42.     },
    43.     selectValue: {
    44.       type: [String, Number],
    45.       default: ''
    46.     },
    47.     option: {
    48.       type: Object,
    49.       default: function () {
    50.         return { label: 'label', value: 'value' }
    51.       }
    52.     },
    53.     isSearch: {
    54.       type: Boolean,
    55.       default: false
    56.     },
    57.     offOption: { // 关闭option配置key-value;当数据是非集合的数组的时候，开启
    58.       type: Boolean,
    59.       default: false
    60.     }
    61.   },
    62.   computed: {
    63.     resultLabel: {
    64.       get () {
    65.         const res = this.columns.filter(item => {
    66.           const data = this.offOption ? item : item[this.option.value]
    67.           return data === this.resultValue
    68.         })
    69.         let label = ''
    70.         if (res.length) {
    71.           label = this.offOption ? res[0] : res[0][this.option.label]
    72.         }
    73.  
    74.         return label
    75.       },
    76.       set () {
    77.  
    78.       }
    79.     }
    80.   },
    81.   data () {
    82.     return {
    83.       show: false,
    84.       searchVal: '',
    85.       resultValue: this.selectValue,
    86.       columnsData: []
    87.     }
    88.   },
    89.   methods: {
    90.     search (val) {
    91.       if (val) {
    92.         this.columnsData = this.columnsData.filter(item => {
    93.           const data = this.offOption ? item : item[this.option.label]
    94.  
    95.           return data.indexOf(val) > -1
    96.         })
    97.       } else {
    98.         this.columnsData = JSON.parse(JSON.stringify(this.columns))
    99.       }
    100.     },
    101.     onConfirm (value, index) {
    102.       const data = this.offOption ? value : value[this.option.value]
    103.  
    104.       this.resultValue = data
    105.       this.show = !this.show
    106.       this.$emit('confirm', value, index, this.resultValue)
    107.     },
    108.     change (val, index) {
    109.       this.$emit('change', val, index, this.resultValue)
    110.     },
    111.     cancel (val, index) {
    112.       this.show = !this.show
    113.       this.$emit('cancel', val, index, this.resultValue)
    114.     },
    115.     showPopu (disabled) {
    116.       this.columnsData = JSON.parse(JSON.stringify(this.columns))
    117.       this.resultValue = this.selectValue
    118.       if (disabled !== undefined && disabled !== false) {
    119.         return false
    120.       } else {
    121.         this.show = !this.show
    122.       }
    123.     }
    124.   },
    125.   watch: {
    126.     selectValue: function (newVal) {
    127.       this.resultValue = newVal
    128.     },
    129.     resultValue (val) {
    130.       this.searchVal = ''
    131.       this.columnsData = JSON.parse(JSON.stringify(this.columns))
    132.       this.$emit('input', val)
    133.     }
    134.   }
    135. }
    136. script>
    137.  
    138. <style lang="scss" scoped>
    139.   .dh-field {
    140.     padding: 0;
    141.     background:#fff;
    142.     .dh-cell.van-cell {
    143.       padding: 10px 0;
    144.     }
    145.     .dh-cell.van-cell--required::before {
    146.       left: -8px;
    147.     }
    148.     .van-popup {
    149.       border-radius: 20px 20px 0 0;
    150.     }
    151.   }
    152. style>

    1.1 单选组件的使用

    ①使用到该组件的页面导入单选组件

     

    ② 在单选地方使用

    1. <van-field-select-picker
    2.     v-model="orderType"
    3.     placeholder="请选择"
    4.     :columns="orderClassify"
    5.     :option="{label:'configName', value:'configCode'}"
    6.      @confirm="onOrderClassify"
    7. />

    ③orderClassify是后台返回的数据，{label:'configName', value:'configCode'} 对应选项的key-value，可以参考下面后台返回的数据

    ④单选事件 onOrderClassify 对应的方法

    1. onOrderClassify(data1, index, data2) {
    2.   // data1 当前这一条的obj数据
    3.   // index 当前选择的索引
    4.   // data2 当前这一条数据的value
    5.   this.orderName = data1.configName
    6. },

     上面便是单选弹框的完整代码，下面开始多选组件的封装

    2、封装多选组件（VanFieldCheckbox）

    1. <template>
    2.   <div class="dh-field">
    3.     <div class="van-hairline--bottom">
    4.       <van-field
    5.         v-model="resultLabel"
    6.         v-bind="$attrs"
    7.         readonly
    8.         :is-link="$attrs.disabled === undefined"
    9.         error-message-align='right'
    10.         input-align="right"
    11.         class="dh-cell"
    12.         @click="showPopu($attrs.disabled)"
    13.       />
    14.       <van-popup v-model="show" position="bottom" class="" >
    15.         <div class="van-picker__toolbar">
    16.           <button type="button" class="van-picker__cancel" @click="cancel">取消button>
    17.           <div class="van-ellipsis van-picker__title">{{$attrs.label}}div>
    18.           <button type="button" class="van-picker__confirm" @click="onConfirm">确认button>
    19.         div>
    20.         <div style="max-height:264px; overflow-y:auto;">
    21.           <van-field v-if="isSearch" v-model="searchVal" input-align="left" placeholder="搜索" @input="search"/>
    22.           <van-cell title="全选">
    23.             <template #right-icon>
    24.               <van-checkbox v-model="checkedAll" name="all" @click="toggleAll"/>
    25.             template>
    26.           van-cell>
    27.           <van-checkbox-group ref="checkboxGroup" v-model="checkboxValue" @change="change">
    28.             <van-cell-group>
    29.               <van-cell
    30.                 v-for="(item, index) in columnsData"
    31.                 :key="item[option.value]"
    32.                 :title="item[option.label]"
    33.                 clickable
    34.                 @click="toggle(index)"
    35.               >
    36.                 <template #right-icon>
    37.                   <van-checkbox ref="checkboxes" :name="item[option.value]" />
    38.                 template>
    39.               van-cell>
    40.             van-cell-group>
    41.           van-checkbox-group>
    42.         div>
    43.       van-popup>
    44.     div>
    45.   div>
    46. template>
    47.  
    48. <script>
    49. export default {
    50.   name: 'VanFieldCheckbox',
    51.   model: {
    52.     prop: 'selectValue'
    53.   },
    54.   props: {
    55.     columns: {
    56.       type: Array,
    57.       default: function () {
    58.         return []
    59.       }
    60.     },
    61.     selectValue: {
    62.       type: Array,
    63.       default: function () {
    64.         return []
    65.       }
    66.     },
    67.     option: {
    68.       type: Object,
    69.       default: function () {
    70.         return { label: 'label', value: 'value' }
    71.       }
    72.     },
    73.     // 是否支持搜索
    74.     isSearch: {
    75.       type: Boolean,
    76.       default: true
    77.     }
    78.   },
    79.   computed: {
    80.     resultLabel: {
    81.       get () {
    82.         const res = this.columns.filter(item => {
    83.           return this.resultValue.indexOf(item[this.option.value]) > -1
    84.         })
    85.         const resLabel = res.map(item => {
    86.           return item[this.option.label]
    87.         })
    88.         return resLabel.join(',')
    89.       },
    90.       set () {
    91.  
    92.       }
    93.     }
    94.   },
    95.   data () {
    96.     return {
    97.       show: false,
    98.       searchVal: '',
    99.       columnsData: JSON.parse(JSON.stringify(this.columns)),
    100.       checkboxValue: JSON.parse(JSON.stringify(this.selectValue)),
    101.       checkedAll: false,
    102.       resultValue: JSON.parse(JSON.stringify(this.selectValue))
    103.     }
    104.   },
    105.   methods: {
    106.     // 搜索
    107.     search (val) {
    108.       if (val) {
    109.         this.columnsData = this.columnsData.filter(item => {
    110.           return item[this.option.label].indexOf(val) > -1
    111.         })
    112.       } else {
    113.         this.columnsData = JSON.parse(JSON.stringify(this.columns))
    114.       }
    115.     },
    116.     getData (val) {
    117.       const res = this.columnsData.filter(item => {
    118.         return val.indexOf(item[this.option.value]) > -1
    119.       })
    120.       return res
    121.     },
    122.     onConfirm () {
    123.       this.resultValue = this.checkboxValue
    124.       this.show = !this.show
    125.       this.$emit('confirm', this.resultValue, this.getData(this.resultValue))
    126.     },
    127.     change (val) {
    128.       this.$emit('change', val, this.getData(this.resultValue))
    129.     },
    130.     cancel () {
    131.       this.show = !this.show
    132.       this.$emit('cancel', this.resultValue)
    133.     },
    134.     toggle (index) {
    135.       this.$refs.checkboxes[index].toggle()
    136.     },
    137.     toggleAll (all) {
    138.       this.$refs.checkboxGroup.toggleAll(this.checkedAll)
    139.     },
    140.     showPopu (disabled) {
    141.       this.columnsData = JSON.parse(JSON.stringify(this.columns))
    142.       this.checkboxValue = JSON.parse(JSON.stringify(this.selectValue))
    143.       this.resultValue = JSON.parse(JSON.stringify(this.selectValue))
    144.       if (disabled !== undefined && disabled !== false) {
    145.         return false
    146.       } else {
    147.         this.show = !this.show
    148.       }
    149.     }
    150.   },
    151.   watch: {
    152.     selectValue: function (newVal) {
    153.       this.resultValue = newVal
    154.     },
    155.     resultValue (val) {
    156.       this.searchVal = ''
    157.       this.columnsData = JSON.parse(JSON.stringify(this.columns))
    158.       this.$emit('input', val)
    159.     },
    160.     columnsData: {
    161.       handler (val) {
    162.         if (val.length && val.length === this.checkboxValue.length) {
    163.           this.checkedAll = true
    164.         } else {
    165.           this.checkedAll = false
    166.         }
    167.       },
    168.       immediate: true
    169.     },
    170.     checkboxValue: {
    171.       handler (val) {
    172.         if (val.length && val.length === this.columnsData.length) {
    173.           this.checkedAll = true
    174.         } else {
    175.           this.checkedAll = false
    176.         }
    177.       },
    178.       immediate: true
    179.     }
    180.   }
    181. }
    182. script>
    183.  
    184. <style lang="scss" scoped>
    185. .dh-field {
    186.   padding: 0;
    187.   background:#fff;
    188.   .dh-cell.van-cell {
    189.     padding: 10px 0;
    190.   }
    191.   .dh-cell.van-cell--required::before {
    192.     left: -8px;
    193.   }
    194.   .van-popup {
    195.     border-radius: 20px 20px 0 0;
    196.   }
    197. }
    198. style>

    ①使用到该组件的页面导入多选组件，和单选组件的导入一致，参考上面

    ② 在多选地方使用

    1. <van-field-checkbox
    2.   v-model="checkedExecutors"
    3.   placeholder="请选择"
    4.   :columns="executor"
    5.   label-width="100"
    6.   :option="{label:'name', value:'userId'}"
    7. />

     ③executor是后台返回的数据，{label:'name', value:'userId'}对应选项的key-value，可以参考下面后台返回的数据

     ④多选事件上面我没用到，我是直接v-model绑定了选中的数据，如果需要在事件中额外处理数据，可以通过@confirm="onConfirm" 来绑定事件(正常获取值用不到，直接v-model即可)

    1. onConfirm (data1, data2) {
    2.     // data1 是当前选中数据的value的数组
    3.     // data2 是当前选中数据的整个obj集合
    4. },

    以上便是基于popup和cell、field封装的select单选、多选组件的完整代码。

  • 相关阅读:
    「高等数学」雅可比矩阵和黑塞矩阵的异同
    创新趋势 | SaaS增长新趋势：产品驱动增长PLG（上）
    国内表格软件-FineReport Count函数
    转置矩阵的性质
    算法补天系列之——前缀树+贪心算法
    【GoWeb项目-个人Blog】数据库表设计
    C# GraphicsPath 类学习
    第9章：项目实战
    Kamiya丨Kamiya艾美捷人α1-抗糜蛋白酶ELISA说明书
    【亲测有效】3分钟 从零安装高匿名http协议带账号密码的代理服务 步骤超简单 仅限用于学习交流使用 勿用于其他用途
  • 原文地址：https://blog.csdn.net/ljw124213/article/details/126058982