vue篇（技術總結 持續更新）

20200320 方法中如何同時傳event和參數

<input type="file" name="file" @change="getImage($event,scope.$index)"/>

20200227 el-table表格出現抖動閃動情況

.el-table{
  width:99.9%;
}

20200121 vue 報錯：Cannot read property '_wrapper' of undefined

通常情況下是@click的方法沒有在methods中定義，一個個去排查吧

20200117 el-select設置value爲對象

普通的，如果直接傳對象，會顯示如下效果，解決辦法：el-select加value-key屬性唯一標識

20200109 el-table勾選和取消勾選以及獲取勾選的值

// 勾選和取消勾選 rows爲數組 type爲true或false
toggleSelection(rows,type) {
  if (rows) {
    rows.forEach(row => {
      this.$refs.multipleTable.toggleRowSelection(row,type);
    });
  } else {
    this.$refs.multipleTable.clearSelection();
  }
},
// 獲取勾選的值 拿到的是數組
handleSelectionChange(val) {
  this.multipleSelection = val;
}

watch監聽

watch:{
      detailDialog: {
        handler(val, oldVal) {
          if (!this.detailDialog) {
            this.getList();
          }
        },
        deep: true // 監聽這個對象中的每一個屬性變化
      },
    },

多個路由指向同一個組件來回切換時不刷新問題

第一種.<router-view :key="$route.path">
第二種.組件頁面中加watch監聽 監聽變化
export default {
  watch: {
    '$route' (to, from) {
      console.log('to=' + to)
      this.reload()
    }
  }
}
第三種.使用vue2.2中引入的beforeRouteUpdate導航守衛（原理同上者，方式略不同）
<template>
  <router-view ></router-view>
</template>
export default {
  beforeRouteUpdate (to, from, next) {
    console.log('routeUpdate：to=' + to.fullPath + ';from=' + from.fullPath)
    next()
  }
}

elementUI tree樹形控件選擇了子節點如何同時獲取父節點

this.$refs.tree.getHalfCheckedKeys().concat(this.$refs.tree.getCheckedKeys())

element-ui框架的el-dialog彈出框被遮罩層擋住了

解決辦法：在el-dialog標籤裏添加 :modal-append-to-body='false'或append-to-body

編輯時表單中el-radio無法點擊選擇的情況

form對象從row拿到的值沒有包含當前屬性 直接賦值的話就會出現這種情況
解決辦法：用$set賦值  this.$set(this.form,'isMaxNums',this.form.IssueQuantity>10000?2:3);

vue-cli項目build後 部署到服務器 css/js報404

修改config目錄下index.js 裏面的assetsPublicPath: '/' 爲assetsPublicPath: './'

如何修改v-html內圖片的或文字的樣式

單獨寫一個style標籤 加樣式

vue-cli項目性能加載優化

1.vue-router路由懶加載（解決vue項目首次加載慢）
2.vue-cli代碼包優化 屏蔽SourceMap（配置productionSourceMap: false）

vue頁面數據更新後如何回滾到最頂部

剛開始用的scrollTo(0,0) 發現時靈時不靈 改進之後 先獲取當前頁面節點 再去滾動
document.getElementsByClassName('news_detail')[0].scrollTo(0,0);

elmentUI+vue實現多選框遍歷數組對象

// 需要label的是整個對象 而不是具體的id或name
<template>
  <el-checkbox-group v-model="checkedCities">
    <el-checkbox v-for="city in cities" :label="city" :key="city.id">{{city.cityName}}</el-checkbox>
  </el-checkbox-group>
</template>
<script>
  export default {
    data() {
      return {
        checkedCities: [{id: 1, cityName: '上海'}],
        cities: [{id: 1, cityName: '上海'}, {id: 2, cityName: '北京'}]
      };
    }
  };
</script>
// 以上寫法 針對對象數組 有時候也無效 可用label去控制id 默認選中的checkedCities也給id數組
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
  <el-checkbox v-for="(city,index) in cities" :label="city.id" :key="index">{{city.name}}</el-checkbox>
</el-checkbox-group>