iview+vue 使用中遇到的问题(表格、select、radio)

1、iview+vue中,对表头的动态设置:

  iview表头若是需要动态设置,可以有两个方法,第一种:

 children: [
            {
              title: '2017年',
              align: 'center',
              key: 'firstYear',
              renderHeader: (h, index) => {
                return h('div', {
                  domProps: {
                    innerHTML: this.data5.lastYear + ''
                  }
                });
              }
            },
            {

  

  利用renderheader属性来设置表头。iview中的table自定义列头显示内容,使用 Vue 的 Render 函数。传入两个参数,第一个是 h,第二个为对象,包含 column 和 index,分别为当前列数据和当前列索引。还有一种方式是在直接调用title更改:

 

this.columns4[2].children[0].title = this.timeYear.lastYear;

  但是这种方式可能会引起Vue的update无限循环警告。建议使用第一种方法。

2、iview+vue中,表单验证select出错:

  可能在使用iview表单的select时,发现代码没有书写错误,但是验证功能出现问题,这是因为iview默认类型与最终select的需要验证的结果类型不一致。

3、iview+vue中,radio选择问题:

  在iview的单选radio中,绑定选中状态lable = “0”与获取选中状态status = 0 是不匹配的,应为“0”。

结论:在iview使用过程中,要注意默认类型问题,很容易出现接收类型与默认类型不一致的情况而导致出现错误。对与表格自定义列的问题,render自定义列内容,renderheader自定义列头。

 

posted @ 2018-09-26 14:59  疯癫释流年  阅读(1179)  评论(0编辑  收藏  举报