多选二级下拉组件aSelect——属性选择系列组件库（design by yRan）

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

目录

• 效果展示
• 功能描述
• 结构代码
• 逻辑代码
• 组件应用
• 事件钩子
• github

效果展示

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

从上到下分别是

功能描述

1. 属性名和按钮由父组件传给子组件
2. 点击下拉按钮下拉才会显示，点击确认时下拉隐藏并将数据回传给父组件
3. 本组件依赖于组件selecter

结构代码

<template>
  <div class="a-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">
        <Button v-if="!select_show && !checked" type="primary" ghost @click="select_handle" >{
  { btn_name }}</Button >
        <Button v-if="select_show && !checked" type="primary" @click="select_confirm" >确认</Button >
      </Col>
    </Row>
    <div class="select-div" v-if="select_show && !checked">
      <Spin size="large" fix v-if="spinShow"></Spin>
      <selecter v-else v-model="mult_group" :data="selectList" search :title="['一级', '二级']" @on-select="selectAll" @on-delete="delTag" @on-clear="clearTag" />
    </div>
    <Divider />
  </div>
</template>

• checked：下拉按钮显示隐藏
• select_show：显示下拉按钮或确认按钮
• Spin：数据量过大时的加载动画

逻辑代码

// 全选
    selectAll ({
    list, check = true, current = '' }) {
   
      let data
      if (current) {
   
        const item = getNameOfData(list, current)
        data = item.children
      } else data = list
      data.forEach((ret) => {
   
        if (ret.children && ret.children.length) {
   
          ret.children.map((rec) => {
   
            this.$set(rec, 'check', check)
            return rec
          })
        } else this.$set(ret, 'check', check)
      })
    },
    // 删除已选
    delTag ({
    list, name }) {
   
      const data = getNameOfData(list, name)
      if (data.children && data.children.length) {
   
        this.selectAll({
    list, check: false, current: data.value })
      } else {
   
        this.$set(data, 'check', false)
      }
    },
    // 清空全部
    clearTag ({
    list }) {
   
      clearTagOfData(list, this)
    },
    select_handle () {
   
      if (this.selectList.length === 0) {
   
        this.spinShow = true
        this.select_show = !this.select_show
        setTimeout(() => {
   
          this.selectList = deepCopy(this.attrList)
          this.select_init = deepCopy(this.attrList)
          this.spinShow = false
        }, 2000)
      } else {
   
        this.select_show = !this.select_show
      }
    },
    select_confirm () {
   
      this.select_show = !this.select_show
      this.selectIds = gameGroup_handle(this.selectList).ids_arr
      this.selectKeys = gameGroup_handle(this.selectList).keys_arr
      this.selectLabels = gameGroup_handle(this.selectList).labels_arr
      // this.selectComIds = gameGroup_handle(this.gameGroup).combineids_arr
      this.$emit(
        'getData',
        this.selectIds,
        this.selectKeys,
        this.selectLabels,
        this.attr_name
      )
    },
    noLimit () {
   
      this.checked = !this.checked
      if (this.checked) {
   
        // 选中不限
        this.$emit('getData', [], [], [], this.attr_name)
      } else {
   
        this.$Message.info('不做任何选择，默认不限哦o(*￣▽￣*)ブ')
      }
    }

• selectAll：处理全选
• delTag：删除已选
• clearTag：清空全部
• select_handle：点击按钮进行判断，若数据没加载出来就显示加载动画等待数据加载完毕
• select_confirm：点击确认之后才会将选中的数据回传到父组件
• noLimit：不限或限制，选中不限，组件隐藏，取消不限则显示组件

组件应用

<aSelect
    attr_name="城市选择"
    btn_name="城市"
    :selList="init_play_game"
    :attrList="cityData"
   @getData="select_get"
></aSelect>

import aSelect from '@/components/attr-check/a-select'
import cityData from '@/data/toutiao/city_province'
components: {
   
    aSelect 
}

data () {
   
    return {
   
        init_play_game: []
    }
}

• import引入——>组件注册——>使用
• 父——>子传参：attr_name属性名、btn_name按钮名、selList初始选中数据赋值、attrList下拉列表数据

事件钩子

// 拿到选择的数据
select_get (ids, keys, labels, attr_name) {
   
      if (labels && isArray(labels)) {
   
        var content
        var nolimit = false
        var val = []
        var val2 = []
        var selectKeys = []
        if (isArray(labels) && labels.length === 0) {
   
          content = '不限'
          nolimit = true
        } else {
   
          content = labels.join(',')
          val2 = ids
          selectKeys = keys
          let temp_keys = keys.map((item) => (item = item.split('-')[0]))
          temp_keys = unique(temp_keys)
          val = temp_keys
        }
        this.previewAttr.some((item) => {
   
          if (item.attr_name === attr_name + ':') {
   
            item.attr_content = content
          }
        })
        var obj = {
   
          val: val,
          val2: val2,
          selectKeys: selectKeys,
          nolimit: nolimit
        }
        switch (attr_name) {
   
          case '城市':
            obj.val = val2
            delete obj.val2
            this.groupObj.game_attr.play_game = obj
            break
        }
      }
    }

• select_get：拿到选择的数据

github

完整代码：点击这里