注意事项

xl-cascader基于element-ui开发，所以你的项目需要先安装element-ui。默认展示全国所有省市区信息，支持自定义数据源。

效果

npm安装

npm i xl-cascader --save

开始使用

import xlCascader from 'xl-cascader'

Vue.use(xlCascader)

代码示例

<el-form ref="form" inline :model="form" label-width="80px">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="省市区">
    <xl-cascader v-model="form.ssq" />
  </el-form-item>
</el-form>

Attributes

| 参数 | 类型 | 说明 | 可选值 | 默认值 | | - | - | - | - | - | | size | string | 用于控制该表单内组件的尺寸 | medium small mini | - | | clearable | boolean | 是否可清空 | - | true | | height | number | 弹出框的高度 | - | 300 | | data | array | 自定义数据源，不设置将展示全国所有省市区信息 | - | - |

自定义数据源格式

[
  {
    name: '广东省',
    districtList: [
      {
        name: '深圳市',
        districtList: [
          { name: '南山区' },
          { name: '宝安区' },
          { name: '福田区' }
        ]
      },
      {
        name: '广州市',
        districtList: [
          { name: '天河区' },
          { name: '番禺区' },
          { name: '越秀区' }
        ]
      }
    ]
  }
]

欢迎提BUG 提需求