多选组件aCheck——属性选择系列组件库（design by yRan）

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

目录

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

效果展示

从左到右分别是：属性名、不限按钮、多选属性列表

功能描述

1. 属性名和属性列表均可由父组件传参到子组件
2. 选中“不限”即该属性不做限制，清空后续条件选择
3. 选中条件，“不限”按钮自动取消选中状态

结构代码

<template>
  <div class="a-check">
    <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">
        <CheckboxGroup
          v-model="checked_attr"
          v-for="item in attrList"
          :key="item.id"
          @on-change="check_attr"
        >
          <Checkbox :label="item.label" border></Checkbox>
        </CheckboxGroup>
      </Col>
    </Row>
    <Divider />
  </div>
</template>

• 根据checked确定是不限还是条件限制状态

逻辑代码

    // 限制还是不限
    noLimit () {
      this.checked = !this.checked
      if (this.checked) {
        // 选中不限
        this.checked_attr = []
        this.$emit('getData', [], this.attr_name)
      } else {
        this.$Message.info('不做任何选择，默认不限哦o(*￣▽￣*)ブ')
      }
    },
    // 选择属性check
    check_attr () {
      const checks = this.checked_attr
      if (checks.length > 0) this.checked = false
      if (checks.length === 0) this.checked = true
      this.$emit('getData', checks, this.attr_name)
    }

• 选中不限传空

组件应用

<aCheck
   attr_name="水果"
   :attrList="attrList.pfList"
   :initList="init_pfList"
   @getData="check_get"
/>

import aCheck from '@/components/attr-check/a-check'

components: {
    aCheck
}

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

• import引入——>组件注册——>使用
• 父——>子传参：attr_name属性名、attrList属性列表、initList初始选中属性列表

事件钩子

// 拿到选中的属性
check_get (checks, attr_name) {
      if (checks && isArray(checks)) {
        var content
        var nolimit = false
        if (checks.length === 0) {
          content = '不限'
          nolimit = true
        } else {
          content = checks.join(',')
        }
        this.previewAttr.some((item) => {
          if (item.attr_name === attr_name + ':') {
            item.attr_content = content
          }
        })
        var obj = {
          val: checks,
          nolimit: nolimit
        }
        switch (attr_name) {
          case '水果':
            this.groupObj.dev_feature.p_pf = obj || {}
            break
        }
      }
    }

• check_get：拿到选中的属性数组，可根据回传的属性名称进行预览信息同步显示选中属性

github

完整代码：点击这里