Select Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------------- | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | -------- | | data | 用于渲染页面的数据(格式与element的级联选择器的数据格式一致) | array | - | 无 | | value | 默认已选择数据项 | array | - | 无 | | expand-trigger | 次级菜单的展开方式 | string | click / hover | click | | separator | 选项分隔符 | string | - | 横杆’-’ | | value-key | 指定选项的值为选项对象的某个属性值 | string | - | value | | label-key | 指定选项标签为选项对象的某个属性值 | string | - | label | | children-key | 指定选项的子选项为选项对象的某个属性值 | string | - | children | | clearable | 是否支持清空选项 | boolean | - | false | | placeholder | 占位符 | string | - | 请选择 | | popper-class | 下拉框的类名 | string | - | '' | | onlyShowChecked | 是否只显示选中的 | boolean | - | false | | isShowIndeterminate | 是否显示半选 | boolean | - | true | | selectChildren | 是否允许父子联动 | boolean | - | true | | maxCount | 最大选择数 使用该属性不能使用全选功能 | number | - | 无 | | transfer | 是否放在body下面展示list （在body下面要自己写样式） | boolean | - | false | | placement | 下拉菜单出现的位置 | string | top，top-start，top-end，bottom，bottom-start，bottom-end，leftleft-start，left-end，right，right-start，right-end | bottom | | labelLv | label显示的层级 | string | all 全部 / 最后一层 last | all | | sync | 异步加载子元素 异步传入数据 sync开启时必填syncCallBack | boolean | - | false | | syncCallBack | 请求数据的回调 sync开启 | function | - | - | | maxRequest | 最大的请求层级 0 为不限制 | number | - | 0 | | notSelectNext | 设置上级的全选不用选择下一级的数据 false 不用选择下一级 true 必选选择下一级 | boolean | @todo | false | | checkKey | 每一级别是否可以选择的数据字段，不填写默认显示选择框。tips: 只有在当前层级全部设置为true才会显示复选框和全选框。 | string | - | showCheck | | echoLabel | 是否要回显labels | array | - | [] | | | | | | | | | | | | | | | | | | |

Select Events

| 事件名称 | 说明 | 回调参数 | | -------------- | ---------------------------------- | ----------------------------- | | change | 选中值发生变化时触发 | 目前的选中值 | | visible-change | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false | | remove-tag | 移除tag时触发 | 移除的tag值 | | clear | 可清空模式下用户点击清空按钮时触发 | - | | getLables | 获取对应的labels | [] |

示例

<template>
  <div id="app">
    <!-- <router-view /> -->
    <IvuMutil style="width: 200px;"
              v-model="list"
              :echoLabel="labels"
              :data="data2"
              sync
              @getLables="getLables"
              :syncCallBack="syncCallBack"></IvuMutil>
  </div>
</template>

<script>
import IvuMutil from '@/components/ivu-multi-cascader'
export default {
  name: 'App',
  data() {
    return {
      list: ['zhinan-shejiyuanze', 'zhinan-daohang'],
      labels: ['指南-设计原则', '指南-导航'],
      data: [
        {
          showCheck: true,
          value: 'zhinan',
          label: '指南',
          children: [
            {
              showCheck: true,
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                {
                  value: 'yizhi',
                  label: '一致'
                },
                {
                  value: 'fankui',
                  label: '反馈'
                },
                {
                  value: 'xiaolv',
                  label: '效率'
                },
                {
                  value: 'kekong',
                  label: '可控'
                }
              ]
            },
            {
              value: 'daohang',
              label: '导航',
              children: [
                {
                  value: 'cexiangdaohang',
                  label: '侧向导航'
                },
                {
                  value: 'dingbudaohang',
                  label: '顶部导航'
                }
              ]
            }
          ]
        },
        {
          value: 'ziyuan',
          label: '资源',
          children: [
            {
              value: 'axure',
              label: 'Axure Components'
            },
            {
              value: 'sketch',
              label: 'Sketch Templates'
            },
            {
              value: 'jiaohu',
              label: '组件交互文档'
            }
          ]
        }
      ],
      data2: [
        {
          showCheck: true,
          value: 'zhinan',
          label: '指南'
        },
        {
          value: 'ziyuan',
          label: '资源'
        }
      ]
    }
  },
  components: {
    IvuMutil
  },
  methods: {
    getLables(lbs) {
      this.labels = lbs
    },
    syncCallBack(data) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          let list = []
          if (data.value === 'zhinan') {
            list = [
              {
                value: 'shejiyuanze',
                label: '设计原则'
              },
              {
                value: 'daohang',
                label: '导航'
              }
            ]
          }
          if (data.value === 'ziyuan') {
            list = [
              {
                value: 'a',
                label: 'A'
              },
              {
                value: 'b',
                label: 'B'
              }
            ]
          }

          resolve(list)
        }, 1000)
      })
    }
  }
}
</script>