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

该项目运用到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 来设置，可能样式会不对，要自己手动配置；

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

<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的显示。
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属性，设置后便可不用遮挡。

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

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

• 问题描述

1. 场景一：当我在table在表格没设置width宽度时，浏览器百分比是会自适应的，不会出现奇怪的空白格，但当在笔记本上看时，因为屏幕宽度的不同，会有一些表格挡住了;
2. 场景二：当我在table，每个表格都设置了width宽度时，在浏览器缩小，会出现奇怪的空白格。

• 解决方法：在每个表格设置minWidth就能有效解决。