lu-multiple-choice

依据公司需求编写的一个级联组件

下载

$ npm i lu-multiple-choice

使用

// 组件中使用
<template>
  <div>
    <multipleChoice :list="list"/>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        list: [
          {
            id: '1',
            departName: '测试1',
            isLeaf： 2,
            ChildList: [
              { 
                id: '2',
                departName: '测试2',
                isLeaf： 1,
                ChildList: null
              }
            ] 
          }
        ]
      }
    }
  }
</script>


// main.js中注册
import Vue from 'vue'
import multipleChoice from 'lu-multiple-choice'

Vue.use(multipleChoice)

组件api

组件的props

| 参数 | 说明 | 类型 | | ----- | ---- | ---- | | title | 组件头部标题 | string | | value | 选中的项的id | string/Number | | list | 数据列表(内部属性名见数据列表属性) | Array | | grade | 级联层数 | Number |

组件的Events

| 事件名 | 说明 | 参数 | | ----- | ---- | ---- | | valueChange | 选中项发生改变时触发 | 选中的项返回一个objcet其中包括value值为选中项id,name值为选中项的名称 | | showClose | 点击关闭是触发 | 无 |

组件Methods

|方法|说明|参数| | ----- | ---- | ---- | | init | 重新渲染组件数据 | 无 |

数据列表属性

|属性|说明|类型| |----| ---- |----| | id | 数据唯一标识 | string | | departName | 数据名称 | string | | isLeaf | 数据层级数(1为最后一级2为其他层级) | Number | | ChildList | 子级数据 | Array |

说明

bug还是有挺多的