移动端 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 仓库, 并将组件移动到你的公共组件目录下