vue+iview項目開發實踐問題總結（一）

• 1.實際使用中須要監聽對象變化或者對象數組中某一屬性是否發生變化

data(){
    return {
        associationNewForm:{...}
    }
},
watch:{
      // ['associationNewForm.ruleName'](){
      //監聽某一屬性發生變化
      //   this.$emit('datachange',this.associationNewForm);
      // }
      associationNewForm:{
        handler:function(val, oldVal){
          this.$emit('datachange',val);//通知父組件數據變化
        },
        deep:true
      }
    },
configStepData:{
//監聽對象數組屬性變化，須要深度監聽
handler: function (newVal) {
    let dataObj={
      flag:'zgjconfigStepData',
      data:this.configStepData
    };
    this.$emit('getSubAlarmConditionData',dataObj);
},
deep: true    //深度監聽
}
複製代碼

• 2.iview中表格渲染行的事件阻止冒泡方式

on: {
click: e => {
  e.stopPropagation();
  this.removeRow(params);
}}
複製代碼

• 3.iview中modal點擊肯定的操做時，可是modal中有表單校驗，這個時候就須要經過loading動態控制

ok () {
    this.$Message.info('異步驗證數據');
    setTimeout(() => {
        this.loading = false;
        this.$nextTick(() => {
            this.loading = true;
        });
    }, 2000);
}
複製代碼

iview的github上有對應的issue有對應問題，相關issue

• 4.iview中時間選擇組件若是須要禁用的話，單獨添加disabled不起做用，須要添加readonly

• 5.iview中table列開啓了ellipsis鼠標滑過顯示tooltip,網上找到一種方法，顯示內容

{
    title: '屬性值',
    key: 'attrValue',
    render: (h, params) => {
        return h('div', [
          h('span', {
              style: {
                  display: 'inline-block',
                  width: '100%',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap'
              },
              domProps: {
                  title: params.row.attrValue
              }
          }, params.row.attrValue)
      ]);

    }
  }
複製代碼

在iview的github上有對應issue，可是沒有獲得解決,上面好多人都在問，稍微吐槽下，感受處理問題不如element-ui框架團隊處理的快，我的更喜愛element。

本身鼓搗出了一種方式

{
            title: '屬性值',
            key: 'attrValue',
            ellipsis:true,
            render: (h, params) => {
                return h('div', [
                  // h('span', {
                  //     style: {
                  //         display: 'inline-block',
                  //         width: '100%',
                  //         overflow: 'hidden',
                  //         textOverflow: 'ellipsis',
                  //         whiteSpace: 'nowrap'
                  //     },
                  //     domProps: {
                  //         title: params.row.attrValue
                  //     }
                  // }, params.row.attrValue)
                  h(
                    'Tooltip',
                  {
                    props: { content: params.row.attrValue, placement: 'top-start', transfer: true },
                    style:{
                      width:'100%'
                    }
                  },
                  [
                    h('span', {
                      style: {
                          display: 'inline-block',
                          width: '100%',
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap'
                      },
                      on: {
                        click: () => {
                          this.toUpdate(params.index);
                        }
                      }
                    },params.row.attrValue)
                  ]
                )
              ]);

            }
          }
複製代碼

不過須要配合樣式才能正常實現

.ivu-tooltip-inner{
    white-space:normal;
  }
  .ivu-tooltip-rel{
    display: block;
  }
複製代碼

初次使用iview，還在不斷摸索中，後續若是有問題的話，會持續更新。

推廣下我的博客,多多支持，歡迎各路大神提出寶貴意見。