iview 踩坑之旅

公司重構管理系統，框架定了vue，UI在element和iview之間選，element樣式被吐槽丑，於是選了iview，但是，，這個坑多啊。。。

廢話少說，羅列了iview中容易出錯或者懵逼的一些地方，希望后來的老哥們少費點頭發。

#環境：vue-2.5, iview-3.0.1#

避免你浪費時間，先列出要點：

1，重置表單；

2，校驗表單；

3,  Table相關；

4，select相關。

 

1，重置表單

1）單獨重置某一項：

this.$refs[name].fields.forEach(function (e) {
      if (e.prop == 'abc') {
          e.resetField()
      }
})

2）全部重置：

this.$refs[name].resetFields()；

 

2，校驗表單

1）單獨校驗某一項：

this.$refs['formAdd'].validateField('xxx');

2）整個表單全部校驗：

this.$refs[name].validate(callback);

3）表單驗證整數的規則：

ruleValidate: {
    day: [
          { required: true, message: '請輸入，必填', trigger: 'blur' },
          { type: 'integer', min: 0, max: 60, message: '必須是介於0和60之間的整數', trigger: 'blur', transform: value => +value }
        ]
}　

4)  自定義校驗表單：

const validateTest = (rule, value, callback) => {
      if (value.length === 0) {
        return callback(new Error('請選擇，必選'));
      }
      callback();
    };

// 在驗證規則ruleValidate里添加
test: [
          {required: true, validator: validateTest, trigger: "blur"}
      ]

更多詳細規則可以查看async-validator。

 

3,  Table相關

某項的內容不是單純的文本，需要顯示html或者轉換狀態時，有二種方法。

1）在columns數組中使用render：

{ title: '狀態',
          align: 'left',
          key: 'status',
          render: (h, params) => {
            let type = params.row.status;
            if (type === 1) return h('div', 'ok');
            return h('div', '不ok');
          }
  }

2）在columns數組中給該項添加type: 'html':

 { title: 'banner', align: 'center', key: 'banner',  type: 'html' }　

    然后在獲取數據時，將特定項轉換成需要的html

list.map(item => {
        let str = '';
        item.content.map(i => {
          str += '<p>' '+ i.title + '</p>';
        });
        item.content = str;
     });

　　

4，select相關

<Select ref="select"></Select>

1) 給select賦初始值，僅在 filterable="true" 時有效：

this.$refs.select.setQuery('abc');

  某些版本的iview會導致下拉列表彈出，此時可以通過點擊失焦，收起下拉列表：

this.$refs.tables.$el.click();

2) 清空單選項，僅在 clearable="true" 時有效：

this.$refs.select.clearSingleSelect();

3）手動清空select的值：

this.$refs.select.query = ''

 select有個坑，用remote-method遠程過濾時，輸入關鍵字得到列表，刪除關鍵字時，每次刪除都會請求一次，全部刪完后不會發起請求，列表還緩存着最后一個關鍵字得到到數據。暫時沒找到比較好辦法。

 

好了，比較實用的都大概在這里了，后續如果有新的坑，會繼續加在這里。