ivu-multi-cascader

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>