总结：iview（基于vue.js的开源ui组件）学习的一些坑(二）

1、iview中modal遇到的一点问题，在新增内容时，需要弹出Modal框（modal框包含一个表单），第一次就是默认的placeholder数据，可是第二次打开时，就是上一次填的值。官网并没有提醒。。。

解决办法是：用watch监听函数，监听modal框，当打开时如果里面有数据就清空，或者关闭这个modal框时，顺便把数据清空。

其中add_model时双向绑定到Madal框上的

   <Modal v-model="add_model" width="360" footer-hide>
        ...
   </Modal>

  watch:{
            add_model: function (value) {
                if (value === false) {
                    this.typeItem = {
                        type_id:0,
                        type_name:'',
                        type_desc: '',      
                    }
                }
            },
        },

注意：这里value，值时modal框的状态，true表示打开，false表示关闭。经测试，在这里value===true和value===false一样的效果。

2、设置类型时，需要请求接口为select组件的option填充数据，代码如下

请求的是类型接口，类型接口里面数据很多，于是只取了两项，一是type_name。一是id（一开始这里不是id,这里有个坑，后面填）。先创建一个对象{}，再向对象里面填充数组[].

    //获取公告类型
            getInformType(){
               getTypeList(this.tid, this.tpage_size, this.tpage_num,this.tkeyword).then(res=>{
                //组装类型到option里面
               var type={};
                  if(res.ret===200 && res.data!==null){
                   for(var i=0;i<res.data.list.length;i++){
                       var labelData=res.data.list[i].type_name
                       type.value=res.data.list[i].id;
                       type.label=labelData;
                      this.List.push(type);
                      console.log(this.List);
                   }
                  }
               })      
            },

给10s思考一下为什么报错？？？

看输出以为是闭包，但是改var 为let也是报一样的错误。

后来发现，是再循环外面定义的type={}对象，应该每次都重新定义一个对象，每次给List数组里面压入一个新的对象。

这样就好了，完美的取到了公告类型。

3、关于select框的表单验证，明明选了，但是一直提示你这个框是空的。

填坑2，本来type_name用来取到类型，id用来给option的key值绑定，想着key 要不一样的，所以直接取了i。

type.value=i;

目前没报什么错误。等到了新增公告信息的时候，根据2取到类型，也很好的在页面加载时都列出来了，但是点击提交时，验证不通过，说不应该为空。最后找到了原因：因为iview默认校验数据类型为String，而我的select用的value是number类型的。

所以后来我把value值赋值为id了，这是一个字符串。

4、iview中如何选中table表格的一行，如何对某一列特定数据绑定点击事件，实现需求。

官方文档table表中有一事件@on-row-click，当点击某一行时触发。

如果要单独给某一列添加点击事件，需要用到render渲染函数。

render: (h, params) => {
                            return h('span', { 
                            on: {
                                        click: () => {
                                            console.log(params.row);
                                           this.toDetail(params.row);
                                        }
                                }
                            },params.row.title)
                       }

其中点击这一列，render函数的Params是这一行的数据。长下面这样，本条数据应该填params.row.title。