本组件二次封装iview，可以在全局安装了Iview的项目或者局部引入了Select的页面中自由使用。

目录

效果展示





从左到右分别是：属性名、不限按钮、多选一级下拉

从上到下分别是：选中单项、全选、点击不限

功能描述

  1. 属性名和下拉提示由父组件传给子组件
  2. 点击不限隐藏下拉，取消显示下拉
  3. 本组件依赖于组件cSearch，下拉逻辑参考该组件

结构代码

<template>
  <div class="a-sim-select">
    <Row>
      <Col flex="110px">
        <span class="c-fix-title wt">{
  { attr_name }}</span>
      </Col>
      <Col flex="90px" v-if="nolimit">
        <Button v-if="checked" type="primary" @click="noLimit">不限</Button>
        <Button v-else @click="noLimit">不限</Button>
      </Col>
      <!-- 单层选择器 -->
      <Col flex="auto" class="sim-sel">
        <Csearch v-if="!checked" :placeholder="btn_name" :trans_unselList="attr_List" :trans_selList="res_attr_List" @func="getAttr_List" />
      </Col>
    </Row>
    <Divider />
  </div>
</template>
  • checked：下拉显示隐藏
  • btn_name：下拉的placeholder

逻辑代码

  data () {
   
    return {
   
      checked: true,
      attr_List: [],
      res_attr_List: deepCopy(this.init_selList),
      sel_attr_List: []
    }
  },
  props: {
   
    nolimit: {
   
      type: Boolean,
      default () {
   
        return true
      }
    },
    attr_name: {
   
      type: String,
      default () {
   
        return '属性名'
      }
    },
    btn_name: {
   
      type: String,
      default () {
   
        return '请选择'
      }
    },
    attrList: {
   
      type: Array,
      default () {
   
        return []
      }
    },
    init_selList: {
   
      type: Array,
      default () {
   
        return []
      }
    }
  },
  computed: {
   },
  methods: {
   
    // 限制还是不限
    noLimit () {
   
      this.checked = !this.checked
      if (this.checked) {
   
        // 选中不限
        this.$emit('getData', [], [], this.attr_name)
      } else {
   
        this.$Message.info('不做任何选择，默认不限哦o(*￣▽￣*)ブ')
      }
    },
    // 拿到选择的属性
    getAttr_List (list, lables) {
   
      this.sel_attr_List = list
      this.$emit('getData', this.sel_attr_List, lables, this.attr_name)
    }
  },
  created () {
   
    setTimeout(() => {
   
      this.checked = false
      this.attr_List = deepCopy(this.attrList)
      this.res_attr_List = deepCopy(this.init_selList)
    }, 1000)
  }
  • noLimit：限制不限处理，取消不限时提示用户进行选择
  • getAttr_List：拿到用户选择的属性，往上回传数据

组件应用

<aSimSelect
   attr_name="水果"
   btn_name="喜欢的水果"
   :attrList="fruitList"
   :init_selList="init_fruitList"
   @getData="sim_select_get"
/>

import aSimSelect from '@/components/attr-check/a-sim-select'
components: {
   
    aSimSelect 
}

data () {
   
    return {
   
        init_fruitList: [],
        fruitList: [
          {
   
            value: 1,
            label: '哈密瓜'
          }, {
   
            value: 2,
            label: '西瓜'
          }, {
   
            value: 2,
            label: '芒果'
          }]
    }
}
  • import引入——>组件注册——>使用
  • 父——>子传参：attr_name属性名、btn_name按钮名、init_selList初始选中数据赋值、attrList下拉列表数据

事件钩子

// 拿到选择的数据
sim_select_get (ids, labels, attr_name) {
   
      if (labels && isArray(labels)) {
   
        var content
        var nolimit = false
        if (labels.length === 0) {
   
          content = '不限'
          nolimit = true
        } else {
   
          content = labels.join(',')
        }
        this.previewAttr.some((item) => {
   
          if (item.attr_name === attr_name + ':') {
   
            item.attr_content = content
          }
        })
        var obj = {
   
          service: ids,
          nolimit: nolimit
        }
        switch (attr_name) {
   
          case '水果':
            this.groupObj.pfinfo_attr.vip_service = obj
            break
        }
      }
    }
  • sim_select_get：拿到选择的数据

github

完整代码：点击这里