iview+vue 使用中遇到的问题（表格selectradio）

Posted 2021-01-13 wy120

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自定义列头。