如果使用过程中遇到问题、有功能建议，欢迎通过邮箱联系我:3110940369@qq.com
npm install mult-cascader
依赖element-ui
npm install element-ui
核心库
npm install mult-cascader
`
使用
在vue2入口文件中引入这些
`
import MultCascader from 'mult-cascader'
import 'mult-cascader/mult-cascader.css'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.use(MultCascader)
`
$3
`
:drawer="showMultCascader"
:dataSourse="treeData"
:names="tabNames"
:labels="tabLabels"
mode="multiple"
:color="themeColor"
:options="customOptions"
@close="handleClose"
/>
已选择(最后一级个数)：{{ checkedIds.length }}
:drawer="showSingleCascader"
:dataSourse="treeData"
:names="tabNames"
:labels="tabLabels"
mode="single"
:color="themeColor"
:options="customOptions"
@close="handleClose2"
@finish="handleFinish"
@change="handleChange"
/>
`
| 参数 | 类型 | 说明 | 默认值 |
| ----------- |:------- | -------------------------- | ------------------------------------------------ |
| drawer | Boolean | 控制抽屉是否显示 | false |
| data-sourse | Array | 数据源 | [] |
| names | Array | 选项卡名称 | [] |
| labels | Array | 选项卡显示文本 | [] |
| mode | String | 选择模式：'single' 或 'multiple' | 'single' |
| color | String | 主题颜色 | '#67C23A' |
| options | Object | 字段映射配置 | { id: 'id', name: 'name', children: 'children' } |
$3
| 事件名 | 说明 | 回调参数 | 模式 |
| ------ | ----------- | -------- | --------------- |
| close | 关闭选择器时触发 | 选中的ID数组 | single/multiple |
| change | 选择项变化时触发 | 选中的项数组 | single |
| finish | 选完最后一级时触发关闭 | 选中的值和项数组 | single |
注意异步打开此组件时，需要先有数据源，否则会报错
推荐在组件data中再定义一个变量判断数据源是否准备好然后v-if
`
ref="cascaderRef"
:drawer="showSingleCascader"
:dataSourse="treeData"
:names="tabNames"
:labels="tabLabels"
mode="single"
:color="themeColor"
:options="customOptions"
@close="handleClose2"
@finish="handleFinish"
@change="handleChange"
/>
比如:
data(){
return {
ready:false
}
}
//开始异步请求
async openCascader() {
const res=this.$http.get('...你的后端url')
this.treeData=res.data
this.ready=true
// 打开选择器
this.showSingleCascader = true
}
``