iview / iview-area

An area-linkage-component bases on Vue and iView-UI components

iView

A high quality UI Toolkit built on Vue.js.

Docs

3.x | 2.x | 1.x

Features

• Dozens of useful and beautiful components.
• Friendly API. It's made for people with any skill level.
• Extensive documentation and demos.
• It is quite beautiful.
• Supports both Vue.js 2 and Vue.js 1.

Who's using iView

• TalkingData 腾云天下
• Alibaba 阿里巴巴
• Baidu 百度
• Tencent 腾讯
• Toutiao 今日头条
• JD 京东
• DiDi 滴滴
• Meituan 美团
• Sina 新浪
• iFLYTEK 科大讯飞
• LY 同程艺龙

If your company or products use iView, welcome to click here to leave a message.

Install

We provide an iView plugin for Vue CLI 3, which you can use to quickly build an iView-based project.

We also provide a starter kit iview-project for you.

Install iView

Using npm:

npm install iview --save

Using a script tag for global use:

<script type="text/javascript" src="iview.min.js"></script>
<link rel="stylesheet" href="dist/styles/iview.css">

You can find more info on the website.

Usage

<template>
    <Slider v-model="value" range />
</template>
<script>
    export default {
        data () {
            return {
                value: [20, 50]
            }
        }
    }
</script>

Using css via import:

import 'iview/dist/styles/iview.css';

Compatibility

• Supports Vue.js 2.x
• Supports Vue.js 1.x - visit 1.0 docs
• Supports SSR
• Supports Nuxt.js
• Supports TypeScript
• Supports Electron
• Most components and features support IE9 and above browsers, some components and features do not support IE

Community

If you want to contribute or have questions or bugs to report:

Questions: Find other users at the Gitter chat or post on StackOverflow using [iview-ui] tag
Bugs: File a issue here - please provide a example so we can help you better
Contribute: Contact us in Gitter chat, WeChat or via mail to [email protected]. PRs welcome!

Major Contributors

Name	Avatar	Name	Avatar	Name	Avatar
Aresn		jingsam		rijn
lcx960324		GITleonine1989		huixisheng
Sergio Crisostomo		lison16		Xotic750
huanghong1125		yangdan8

Ecosystem Links

• iView Developer
• iView Run
• iView-Admin
• iView-Loader
• iView-Plugin
• iView-Area
• iView-Editor

License

MIT

Copyright (c) 2016-present, TalkingData

iview-area's Issues

无法清空 当前选中项

   <al-cascader v-model="formItem.subAddress" :level="2" data-type="name"/>

挺头疼的，formItem.subAddress = [] ,没有作用，希望可以修复这个问题

**省选项无法选择

级联类型时，**省选项无法选中

选择直辖市时，数据不会变化

view-area 插件在使用的时候，如果是选择直辖市，数据就不变
请注意：已经选了天津，但是数据还是北京

官方Demo可以直接重现：https://iview.github.io/iview-admin/#/component/area-linkage

报了一个组件名的错<Row>

vue版本为2.5.2,
iview版本为3.0.1
iview-area版本为1.6.0
引入组件：
<al-selector v-model="resArr" level="1" />
之后，报错：Unknown custom element: <Row> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
不识别这个组件，是不是版本的问题导致的？？？

直辖市切换 县区不会改变

1. 先选择北京市 选择昌平区
2. 选择天津市 发现县区无变化 ～～

选中以后值还是空的

是否可以提供transfer

无法禁用 省级别的 下拉

用法

无法达到 第一个省级下拉禁用的效果

发现al-selector 对 disabled处理 如下 :
while (this.disabled[i]) {
if (this.disabled[i] === level) {
isDis = true;
break;
}
i++;
}

this.disabled[i] = 0 时 无法处理 ，建议修改

https://github.com/iview/iview-area/issues/17

增加一个 clearable 属性

我们假设这么个场景，看看这个东西怎么用。
一组筛选功能，选择省市区后点击『筛选』按钮筛选数据，然而用户这个时候选择了『上海』，这时候用户自己发现不需要筛选省市区了，这个时候如何撤消刚才下拉框里选择的『上海』呢？

希望能配置select 的 clearable 属性

增加移动端和终端机的UI优化

增加移动端和终端机的UI优化

设置默认值失效

如图，res1在data初始化值的话 区域可以设置默认值，但是resDefault在mounted的时候初始化值 区域就绑定不了默认数据

请问最新版的1.5.14怎么下载？

npm 上的1.6.0的双向绑定不起作用

github 上的是1.5.17 npm 上的是1.6.0,而1.6.0的双向绑定是有问题了。没办法双向绑定

能否给级联形式增加一个选择即改变

类似iview级联里的change-on-select
场景是这样的 比如说选择区域 有些时候是想选择整个区域 或者市 但是展示级别还是展示到街道这样。 @lison16

直辖市切换相关

当选择北京市而且四个选择框都选上时，切换天津市或上海市或重庆市，后面两个选择框里面的值不会清空

请更新area-data 目前打包文件太大

area-data v5
area-data/pcaa.js 97.7 KB

area-data v1
data.js 1.3M

import areaData from 'area-data/pcaa'

Cascader使用v-model无法实现双向绑定。

Cascader可以更改绑定的对象
当对像值发生变化时，Cascader并没有同步变化。

微信PC版所搭载的谷歌39版本启动就报错

1. 我的项目引入了 iview-area。但是在微信自带的浏览器启动就报错.
2. 我查询了得知微信PC浏览器搭载的是Google Chrome 32位 v39.0.2171.99
3. 报错内容是： Uncaught TypeError: undefined is not a function
   

只能使用输入框来控制，不支持自定义。

Cascader 通过设置 slot 可以自定义显示内容，不局限于输入框。
al-cascader不支持

快速连续多次点击输入框时下拉框移位

使用选择器类型或者级联类型时，当在页面上快速连续多次点击该插件的输入框，在大概第8次左右，下拉框会移位，出现在整个页面的左上侧

注意，一定要快速连续点击输入框

无法npm install iview-area的1.5.13或1.5.14版本

#样式问题#下拉菜单地址显示不全

如图，当街道地址过长时，出现样式问题，下拉菜单没有显示完全

Cascader形式下，城市没有区/县无法选中城市

无法清空选项

无法从外部清空数组

**无法选择

1.6.0 版本

Cascader形式下，选择了非**省选项后，再会过头选择**省，会木有反应。。。。

如题喽~

al-selector动态设置默认选中的区域

我的al-selector是放在modal里的，每次modal显示需要设置不同的默认区域，通过v-model双向绑定resDefault，发现第一次设置resDefault可以正常显示，后面设置resDefault值，显示的默认区域没有变化

数据不全，如东莞市缺失数据

因为iview-area似乎很久没更新了，数据有些不全。（需要更新area-data）

我fork下来，自己本地改造了一下，引入了area-data最新包，并重新发布在npm上。有需要的可以下载一下

npm install iview-area-new --save

关于该组件在Form中使用验证无效的问题

<template>
<div>
   <Button type="success" @click="handleValidate">handleValidate</Button>
   <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">
      <FormItem label="地区" prop="area">
        <al-cascader v-model="formValidate.area" placeholder="请选择所在地区"/>
      </FormItem>
   </Form>
</div>  
</template>

<script>
export default {
  data() {
    const validateArea = (rule, value, callback) => {
      if (value.length === 0) {
        return callback(new Error("请选择地区"));
      } else {
        callback();
      }
    };

    return {
      formValidate: {
        area: []
      },
      ruleValidate: {
        area: [{ validator: validateArea, trigger: "change" }]
      }
    };
  },
  methods: {
    handleValidate() {
      this.$refs["formValidate"].validate(valid => {
        if (valid) {
          console.log("success");
        } else {
          console.warn("fail");
        }
      });
    }
  }
};
</script>

然后执行验证

this.$refs['formValidate'].validate((valid) => {})

结果如下：

是不支持在Form里面使用验证功能吗？

在npm install iview-area的1.5.13或1.5.14版本的时候报错，无法安装该模块

有人知道iview-area地区选择组件怎么写验证吗？

            <FormItem label="地区" :error="articleError" prop="area">
              <Row>
                <Col span="24">
                <al-selector v-model="dataInfo.areaInfo" data-type="code" level="2" @on-change="changeArea" />
                </Col>
              </Row>
            </FormItem>

验证对象:

//选择地区这块验证用此方法失效
          area: [{
            type: 'number',
            required: true,
            message: '请选择地区',
            trigger: 'change'
          }]

浙江杭州的临安市改为为临安区了

无法动态修改已选中的城市

选中城市后，通过修改v-model绑定的数据的方式，无法实现修改已选中城市的效果，能否提供接口允许修改已选中城市？

al-cascader设置初始值有你问题

我通过v-model传入包含name的数组来绑定初始值，但是这个数组在绑定后就被清空了！！

v-modal双向绑定不起作用

我在弹窗iview的modal中使用area组件，
就是用户表格单向选择编辑，然后弹窗有编辑表格，这个时候area的数据才通过ajax请求获取到本地。

<al-selector v-model="workUnitInfo.cityCodes" data-type="code" gutter="5" level="2" size="small"/>

发现v-modal不起作用，通过vue的开发者工具是能看到value有内容的。
能否是不是组件数据变更没有触发？

如何升级到1.5.18

No compatible version found: iview-area@^1.5.18
Valid install targets:
1.5.17, 1.5.16, 1.5.15, 1.5.14, 1.5.13, 1.5.12, 1.5.11, 1.5.10, 1.5.9, 1.5.8, 1.5.7, 1.5.6, 1.5.5, 1.5.4, 1.5.3, 1.5.2, 1.5.1, 1.5.0, 1.4.0, 1.3.0, 1.2.0, 1.1.1, 1.1.0, 1.0.13, 1.0.12, 1.0.11, 1.0.10, 1.0.9, 1.0.8, 1.0.7
npm ERR! notarget

不能多次赋值

问题主要在 this.isInit 这个代码上. 首次初始化之后.不能再次动态赋值了.
https://github.com/xingzhefeng/iview-area 我forks的.
修改了index.html npm run dev 后可以查看效果

升级到1.5.15报错

iview-area.js?0465:1 Uncaught TypeError: r is not a function
at Object.eval (iview-area.js?0465:1)
at e (iview-area.js?0465:1)
at Object.eval (iview-area.js?0465:1)
at e (iview-area.js?0465:1)
at Object.eval (iview-area.js?0465:1)
at e (iview-area.js?0465:1)
at Object.eval (iview-area.js?0465:1)
at e (iview-area.js?0465:1)
at Object.eval (iview-area.js?0465:1)
at e (iview-area.js?0465:1)

引入出错？

请问还要怎么做？

iview 2.14.0使用al-selector点击参数双向绑定没值

选择一个省份之后如何清空选项？

RT

Cascader默认数据异步加载的问题

我通过ajax异步获取数据来设置Cascader的时候没有触发组件的显示更新，如果直接在data里设置绑定值的时候是没有问题的！！！建议Cascader外抛一个方法，让外部通过ref来调用控制更新显示！

文件太大，单组件压缩之后接近1MB ，建议从第3方获取地区数据

在level设置为3时，如果有的城市没有区县，例如广东东莞，则无法选中

一直报这个错误

document.body.removeChild(document.getElementsByClassName('ivu-spin-fullscreen')[0]);

滚动时不断弹出Uncaught (in promise) TypeError: Cannot read property 'popper' of null

           <Row>
                <Col span="24">
                <Form-item label="活动地区" prop="AreaId">
                    <al-cascader v-model="lastAreaCode" level="2" />
                </Form-item>
                </Col>
            </Row>

写了一个Modal,里面用了cascader,可以选择出来地区，就是不断报错，特别是上下移动弹窗的时候，请问大神，这是什么问题，怎么解决呢？

v-model 无法进行双向数据绑定

修改v-model绑定的值 , 想把它赋值为空 ,但是选择的项还是没变

文档没看到自定义显示格式的设置属性？

按照iView admin的描述，可以实现自定义显示格式，如下：

请问如何设置实现？文档描述的配置中未找到相关说明。

1.6.0版本Select组件的问题

Select组件发现重新选择第一级地址后，后面的地址没有重置，还是保持在第一次选择地区的子地址。
直接按照文档安装，并复制的代码过去，Cascader组件没问题。
难道是iview版本问题？iview版本是："2.14.3"。