移动端 3 级级联 （单选/多选）

install

1. 安装: yarn add y-multi-cascader

options

属性	描述	格式	默认值
tree-data	选择项节点数据	TreeData	[]
map	节点数据映射,当数据源不是标准的[{key,value,children}] 格式时, 可以通过 map 将对应字段映射	TreeDataMap	{ key:'key', value:'value', children:'children'}
multi	是否多选	boolean	true
title	标题文本,可用 slot 替代	string	'请选择'
submit-text	提交按钮文本	string	'确认'
selected	当前选中项, 一般情况下,请使用 v-model 进行双双向绑定 ,如果多选情况下,selected 返回的是一个数组,如果是单选,则返回对象	Array(多选) , Object(单选)	[]

数据格式

// 结构化选项数据
type TreeData [
  {
    key: String | Number;
    value: any;
    children: Array<TreeData>
  }
]
// 字段映射
type TreeDataMap {
  key: String
  value: String
  children: String
}

example

<template>
  <!-- 默认写法 -->
  <multi-cascader
            v-model="selection"
            ref="cascader"
            title="选择"
            multi
            :tree-data="treeList"
  />
  <!-- tree data 结构映射 -->
  <multi-cascader
            v-model="selection"
            ref="cascader"
            title="选择"
            multi
            :tree-data="treeList"
            :map="{
              key: 'key',
              value: 'value',
              children: 'children'
            }"
  />
  <!-- 单选用法 -->
  <multi-cascader
            v-model="checked"
            ref="cascader"
            title="选择"
            :multi="false"
            :tree-data="treeList"
  />
</template>

<script>
import MultiCascader from 'y-multi-cascader'


export default {
  components: {
    MultiCascader
  },
  data: {
    checked: null,
    selection: [],
    treeList:[
      {
        key:'a',
        value:'b',
        children:[
          {
            key:'a',
            value:'b',
            children:[
              key:'a',
              value:'b'
            ]
          }
        ]
      }
    ]
  },
  methods:{
    open() {
        this.$refs.cascader.open() // 注意: 级联器开关通过 内置方法实现, v-model绑定的是选中数据
    }
  }

}

</script>

slots 插槽

插槽	描述
header	自定义标题栏

备注

如果要定制化修改, 请 fork 仓库, 并将组件移动到你的公共组件目录下