organization 机构选择组件
注意
organization 组件基于 element-ui 的 cascader 的组件二次封装,继承大部分的属性配置,props 属性请使用 defaultProps。
organization 组件内部默认会通过local/selectOrgOption
请求数据,并且会自动区分三种用户体系,如果数据不满足,通过 defaultProps 中的 lazyLoad 动态请求即可。
如果需要修改默认数据的请求地址,可以在.env 文件中配置 VUE_APP_ORG_API
用法
vue
<template>
<ws-organization
:data="options"
v-model="organization"
:defaultProps="props"
></ws-organization>
</template>
<script>
const options = [
{
relationId: 'zhinan',
orgName: '指南',
children: [
{
relationId: 'relationId',
orgName: '设计原则',
children: [
{
relationId: 'yizhi',
orgName: '一致',
},
],
},
{
relationId: 'daohang',
orgName: '导航',
children: [
{
relationId: 'cexiangdaohang',
orgName: '侧向导航',
},
{
relationId: 'dingbudaohang',
orgName: '顶部导航',
},
],
},
],
},
{
relationId: 'zujian',
orgName: '组件',
children: [
{
relationId: 'basic',
orgName: 'Basic',
children: [
{
relationId: 'layout',
orgName: 'Layout 布局',
},
],
},
{
relationId: 'form',
orgName: 'Form',
children: [
{
relationId: 'radio',
orgName: 'Radio 单选框',
},
],
},
],
},
{
relationId: 'ziyuan',
orgName: '资源',
children: [
{
relationId: 'axure',
orgName: 'Axure Components',
},
],
},
]
export default {
data() {
return {
organization: '',
props: {
lazy: false,
},
options,
}
},
}
</script>
Attributes
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
value / v-model | 绑定值 | String/Number/Array | - |
data | 数据源,不传则取组件内部数据 | Array | [] |
valueKey | 获取字段,默认为 relationId,可选 agencyNumber | String | relationId |
level | 显示级别 1 大区,2 分公司,3 服务中心,4 服务站 | String | 4 |
defaultProps | 参考 el-cascader 的 props 配置项 | Object | - |
Events
方法名 | 说明 |
---|---|
change | 获取选中项 |