关于iView组件中遇到的坑及解决方法

1,475 阅读3分钟

该项目运用到vue2 + iview,在开发过程中,会遇到iView中的坑,之前只是零零碎碎的记录,便来整理记录下,有些是因为自己不够细心,没看文档导致的坑。

组件文档地址: https://www.iviewui.com/

一、collapse折叠面板搭配v-for循环需要注意的点

  • 需求背景:collapse折叠面板的内容需要通过接口返回的数组来渲染显示;
  • 问题描述:Panel的遍历时name属性以index索引来赋值,但在运行的时候会一直报错
  • 解决方法:将name属性转化为字符串类型,在文档中也有提到。
<Collapse>
   <Panel :name="index.toString()" v-for="(item,index) in list" :key="index">
        {{item.content}}
   </Panel>
 </Collapse>

二、Form表单中label的宽度

  • 问题描述:在Form设置了表单域标签的宽度,所有的 FormItem 都会继承 Form 组件的 label-width 的值,但想要单独设置FormItem的宽度;
  • 解决方法:可以在FormItem标签中加个label-width属性自定义来设置

三、Input输入框设置maxlength后要提示用户

  • 解决方法:
  1. 第一种方法根据iview中的属性show-word-limit 来设置,可能样式会不对,要自己手动配置; image.png

  2. 第二种方法是在输入框设置on-change的方法,当字数达到最大时进行提示 image.png

<template>
    <Input 
           v-model="value" 
           placeholder="Enter something..." 
           style="width: 300px" 
           maxlength="5"
           @on-change="setLengthTip"
     />
</template>
<script>
    export default {
        data () {
            return {
                value: ''
            }
        },
        methods:{
          setLengthTip(e){
            if(e.target.value.length == e.target.maxLength){
                this.$Message.warning('最多输入5字!');
              }
            }
        }
    }
</script>

四、Select选择器、Radio单选框和Checkbox多选框的获取到值不用转换得数字类型

  • 问题描述:在组件中就算传的是数字类型在lable(Radio和Checkbox)或value(Select),v-model始终获得的值会是字符串类型,但接口又需要传数字类型
  • 解决方法:在lable(Radio和Checkbox)或value(Select)前加上冒号:
<template>
    <RadioGroup v-model="value">
        <Radio :label="0"></Radio>
        <Radio :label="1"></Radio>
    </RadioGroup>
</template>
<script>
    export default {
        data () {
            return {
                value: null
            }
        }
    }
</script>

五、Modal 对话框 关闭问题

  • 问题描述:Modal框里面是个Form表单,点击确定之后,先验证表单,验证通过则关闭Modal框,验证不成功则提示用户,不关闭,但一点击底部按钮Modal框就默认关闭了。
  • 解决方法:有两种方法
  1. 添加属性loading后,可通过控制loading的值来进行控制modal的显示。 image.png
  2. 使用slot插入自定义的底部按钮组就不会存在上述不可阻断的问题了
<template>
    <Button type="primary" @click="modal = true">Display dialog box</Button>
    <Modal
        v-model="modal"
        title="Title"
        footer-hide
      >
        <div class="content">
          <div>表单内容省略</div>
           <div slot="footer">
             <Button style="margin-right: 15px" @click="handleCancel">重置</Button>
             <Button type="primary" @click="handleSave">保存</Button>
           </div>
         </div>
    </Modal>
</template>
<script>
    export default {
        data () {
            return {
                modal: false
            }
        },
        methods: {
            handleCancel(){
              this.modal = false;
            },
            handleSave(){
              if(条件判定 == true){
                this.modal = true;
              }else{
                return
              }
            }
        }
    }
</script>

六、Poptip气泡框与Table表格的结合

  • 问题描述:Poptip气泡框会被Table表格遮挡
  • 解决方法:在文档中有transfer属性,设置后便可不用遮挡。 image.png

但会出现另个问题是:poptip中内容为Select下拉列表的话,会出现闪退的现象。所以将Table表格样式overflow:hidden设置样式为:overflow:inherit

七、Table表格中每一个宽度自适应问题

  • 问题描述
  1. 场景一:当我在table在表格没设置width宽度时,浏览器百分比是会自适应的,不会出现奇怪的空白格,但当在笔记本上看时,因为屏幕宽度的不同,会有一些表格挡住了;
  2. 场景二:当我在table,每个表格都设置了width宽度时,在浏览器缩小,会出现奇怪的空白格。
  • 解决方法:在每个表格设置minWidth就能有效解决。