篇文章主要總結(jié)了一些在項(xiàng)目中遇到的一些小問題以及對(duì)應(yīng)的解決方案，避免日后踩坑，后續(xù)補(bǔ)充中，如果你對(duì)這些問題有不同的解答，歡迎評(píng)論

1. 輸入框使用v-model 綁定值，但是不能改變

// 第一種情況
<el-input v-model="form.title"></el-input>
// 初始化
data () {
 return {
 form: {}
 }
}
// 賦值,其中formData為父組件傳過來的數(shù)據(jù)
mounted (){
 this.form.title = this.formData.title
}
// 感覺并沒有什么問題，但是就是不好用，解決辦法就是單獨(dú)賦值
data () {
 return {
 form: {},
 title: ''
 }
}
// 第二種情況
在表單中使用時(shí)，用:model=""給輸入框賦值
<el-form :model="formData">
 <el-form-item>
 <el-input placeholder="請(qǐng)輸入" :model="formData.value" size="small"/>
 </el-form-item>
</el-form>
// 解決方案，改為
<el-input placeholder="請(qǐng)輸入" v-model="formData.value" size="small"/>
復(fù)制代碼

2. 文本內(nèi)容不對(duì)html標(biāo)簽轉(zhuǎn)譯

我想要輸入下面的內(nèi)容，但是保存數(shù)據(jù)后，就變成了aaa

解決辦法： 如果是html內(nèi)容、javascript、xml或其他特殊內(nèi)容，使用<xmp></xmp>

如果是有空格和回車這樣的特殊字符的簡(jiǎn)單文本 在文本外加<pre></pre> 標(biāo)簽

3. 基礎(chǔ)導(dǎo)出功能

SensitiveOperationExport(params).then(res => {
 if (res.data.code === '200') {
 // 這里是導(dǎo)出
 window.location.href = res.data.data.path
 this.$message({
 message: '導(dǎo)出成功！',
 type: 'success'
 })
 } else {
 this.$message.error({message: '導(dǎo)出失??！'})
 }
 })
復(fù)制代碼

4. 使用element table 時(shí)，禁用部分復(fù)選框

<el-table-column type="selection" align="center" fixed :selectable="selectable"></el-table-column>
復(fù)制代碼

官網(wǎng)上有這樣一個(gè)操作 selectable, 僅對(duì) type=selection 的列有效，類型為 Function，F(xiàn)unction 的返回值用來決定這一行的 CheckBox 是否可以勾選

5.接口返回的數(shù)據(jù)為json類型，展示到表格中時(shí)，可以這樣轉(zhuǎn)換

// 數(shù)據(jù)結(jié)構(gòu) content: "{'title': '這是標(biāo)題'}"
this.title = JSON.parse(content).title
復(fù)制代碼

6. 列表中點(diǎn)擊圖片放大功能

安裝viewer，可支持圖片的切換，旋轉(zhuǎn)，放大等功能，具體操作文檔可百度查看，使用在頁面中也非常簡(jiǎn)單，第一步，全局配置

// main.js 中引入配置
Viewer.setDefaults({
 'zIndex': 9999,
 'inline': false, // 是否默認(rèn)展示縮略圖
 'button': true, // 右上角按鈕
 'navbar': true, // 底部縮略圖
 'title': true, // 當(dāng)前圖片標(biāo)題
 'toolbar': true, // 底部工具欄
 'tooltip': true, // 顯示縮放百分比
 'movable': false, // 是否可以移動(dòng)
 'zoomable': true, // 是否可以縮放
 'rotatable': true, // 是否可旋轉(zhuǎn)
 'scalable': true, // 是否可翻轉(zhuǎn)
 'transition': true, // 使用 CSS3 過度
 'fullscreen': true, // 播放時(shí)是否全屏
 'keyboard': true, // 是否支持鍵盤
 'url': 'data-source'
})
// 頁面中使用
<viewer>
<img :src="scope.row.content "/>
</viewer>
復(fù)制代碼

7. 上移和下移操作

一般來說，上移和下移是掉接口操作的，但是也有不掉接口的

/ 上移
moveUp (index, row) {
 if (index > 0) {
 let upDate = this.tableData[index - 1]
 this.tableData.splice(index - 1, 1)
 this.tableData.splice(index, 0, upDate)
 }
},
// 下移
moveDown (index, row) {
 if ((index + 1) === this.tableData.length) {
 console.log('已經(jīng)是最后一條，不可下移')
 } else {
 let downDate = this.tableData[index + 1]
 this.tableData.splice(index + 1, 1)
 this.tableData.splice(index, 0, downDate)
 }
}
復(fù)制代碼

8. 表格的全選和反選

<el-table :data="tableData" border :select-all="allSelect" @selection-change="changeFun" ref="form" height="700"></el-table>
// tableData 是表格數(shù)據(jù)
<div>
 <el-button @click="toggleSelect(tableData)">全選</el-button>
 <el-button @click="reverseSelect(tableData)">反選</el-button>
</div>
// 全選
 toggleSelect (rows) {
 if (rows) {
 rows.forEach(row => {
 this.$refs.form.toggleRowSelection(row, !this.allSelect)
 })
 this.allSelect = !this.allSelect
 }
 },
 // 反選
 reverseSelect (rows) {
 let checked = this.data
 if (rows) {
 rows.map(row => {
 checked && checked.map(item => {
 if (row.index !== item.index) {
 this.$refs.form.toggleRowSelection(item, false)
 this.$refs.form.toggleRowSelection(row, true)
 } else {
 this.$refs.form.toggleRowSelection(row, false)
 }
 })
 })
 if (checked.length === 0) {
 rows.forEach(row => {
 this.$refs.form.toggleRowSelection(row, true)
 })
 }
 }
 },
 // 獲取選擇的數(shù)據(jù)
 changeFun (val) {
 this.data = val
 }
復(fù)制代碼

9. 按住說話功能

這個(gè)功能依賴于recorder.js, 上一篇文章已經(jīng)介紹過用法了，這里就不在細(xì)說

10. 表格編輯和保存切換

// editColorShow: '' // 設(shè)置敏感操作默認(rèn)顯示編輯
// clearEdit: '000' // 替換editColorShow的值
<el-table-column label="操作" align="center"
 width="200">
 <template slot-scope="scope">
 <el-button size="small" v-if="editColorShow !== scope.$index" type="primary" @click="editColor(scope.$index, scope.row)">編輯</el-button>
 <el-button size="small" v-if="editColorShow === scope.$index" type="primary" @click="submitSettingOperation(scope.$index, scope.row)">保存</el-button>
 </template>
 </el-table-column>
 // 方法中這樣
editColor (index, row) {
 this.editColorShow = index
},
submitSettingOperation (index, data) {
 this.editColorShow = this.clearEdit
 }
復(fù)制代碼

11. 深拷貝

第一種：

function copy(arr) {
 var newObj = arr.constructor === Array ? [] : {}
 if (typeof arr === 'object') {
 for (var i in arr) {
 if (typeof arr[i] === 'object') {
 newObj[i] = copy(arr[i])
 }
 newObj[i] = arr[i]
 }
 return newObj
 } else {
 return
 }
}
復(fù)制代碼

第二種

function copy (obj) {
 var newObj = obj.constructor === Array ? [] : {}
 newObj = JSON.parse(JSON.stringify(obj))
 return newObj
}
復(fù)制代碼

12.表單重置問題

之前重置表單的時(shí)候都是this.form.xx='',如果是一兩個(gè)還好，但是如果表單很多的話就不是很適用了，發(fā)現(xiàn)了一個(gè)很便捷的操作，只要一行代碼就搞定了

this.$refs['infoForm'].resetFields() 
// 前提是要重置的輸入框必須設(shè)置prop屬性才可以
復(fù)制代碼

13. txt文件導(dǎo)出，有兩種方式

第一種 純前端下載

fetch('https://xxxxx.com/' + item.path).then(res => res.blob().then(blob => {
 var a = document.createElement('a')
 var url = window.URL.createObjectURL(blob)
 var filename = 'text.txt'
 a.href = url
 a.download = filename
 a.click()
 window.URL.revokeObjectURL(url)
}))
復(fù)制代碼

第二種 獲取到txt的內(nèi)容后下載

createDownload (fileName, content) {
 var blob = new Blob([content])
 var link = document.createElement('a')
 var bodyEle = document.getElementsByTagName('body')[0]
 link.innerHTML = fileName
 link.download = fileName
 link.href = URL.createObjectURL(blob)
 bodyEle.appendChild(link)
 link.click()
 bodyEle.removeChild(link)
 }
復(fù)制代碼

雖然兩種都可以實(shí)現(xiàn)下載，但是要保證下載的接口可以在頁面中訪問到，不會(huì)有跨域等問題

14. 導(dǎo)出exel

導(dǎo)出表格這里提供兩種方法，第一種依賴第三方，首先下載三個(gè)依賴

下載Blob.js和Export2Excel.js 兩個(gè)文件，引入文件中

// npm install file-saver xlsx script-loader --save
// 導(dǎo)出
 onExportExcel (formName) {
 import('@/vendor/Export2Excel').then(excel => {
// 表格的title
 const tHeader = ['訂單編號(hào)', '姓名', '員工編號(hào)', '手機(jī)號(hào)', '公司']
// 對(duì)應(yīng)的字段 
 const filterVal = ['sn', 'user_name', 'user_no', 'user_phone', 'user_company']
 const data = this.formatJson(filterVal, this.dataTable)
 excel.export_json_to_excel({
 header: tHeader,
 data,
 filename: `訂單列表`
 })
 })
 },
 formatJson (filterVal, jsonData) {
 let arr = jsonData.map(v => filterVal.map(j => v[j]))
 return arr
 }
復(fù)制代碼

第二種 通過vue-json-excel，具體細(xì)節(jié)可參考vue-json-excel

// 安裝 npm install vue-json-excel，引入
// vue中使用
<download-excel
 class = "btn btn-default"
 :data = "json_data"
 :fields = "json_fields"
 worksheet = "My Worksheet"
 name = "filename.xls">
</download-excel>
data(){
 return {
// 要導(dǎo)出的字段
 json_fields: {
 'Complete name': 'name',
 'City': 'city',
 'Telephone': 'phone.mobile',
 'Telephone 2' : {
 field: 'phone.landline',
 callback: (value) => {
 return `Landline Phone - ${value}`;
 }
 },
 },
// 要導(dǎo)出的數(shù)據(jù)
 json_data: [
 {
 'name': 'Tony Pe?a',
 'city': 'New York',
 'country': 'United States',
 'birthdate': '1978-03-15',
 'phone': {
 'mobile': '1-541-754-3010',
 'landline': '(541) 754-3010'
 }
 },
 {
 'name': 'Thessaloniki',
 'city': 'Athens',
 'country': 'Greece',
 'birthdate': '1987-11-23',
 'phone': {
 'mobile': '+1 855 275 5071',
 'landline': '(2741) 2621-244'
 }
 }
 ],
 json_meta: [
 [
 {
 'key': 'charset',
 'value': 'utf-8'
 }
 ]
 ]
}
}
復(fù)制代碼

15.導(dǎo)航欄中使用iconfont，選中不變色問題

先來看看對(duì)比

項(xiàng)目是基于element-ui開發(fā)的，避免不了使用到圖標(biāo)，所以阿里圖庫是個(gè)很好的選擇，這里遇到的問題是左側(cè)導(dǎo)航欄選中后，文字顏色發(fā)生變化，但是圖標(biāo)卻一直不變，一般來說引用阿里圖庫有三種方式：Unicode、Font Class 、symbol；我用的是symbol方式引用，具體如下

1.圖標(biāo)選用的是svg格式，選擇要使用的圖標(biāo)，下載svg格式

2.創(chuàng)建icon文件夾用于存放圖標(biāo)，創(chuàng)建svgIcon文件夾用于使用圖標(biāo)，使用如下

3.這里導(dǎo)致圖標(biāo)不變色的原因是下載的圖標(biāo)本身就是帶有顏色的，那么在通過symbol獲取圖標(biāo)時(shí)會(huì)在svg的path中增加fill屬性，導(dǎo)致無法更改顏色，可以將圖標(biāo)中fill屬性置空，這樣就可以解決了

何在前端JavaScript開發(fā)中使用ES新特性？babel是什么？.babelrc文件又是干什么用的？文件中的presets和plugins又是什么鬼？本文將解答上述疑問。

babel是什么

babel是一個(gè)JavaScript編譯器

為什么要babel

ES規(guī)范今年來更新較為頻繁，近幾個(gè)版本推出很多新的特性，而用戶的瀏覽器版本眾多，很多用戶用的是老版本瀏覽器，老版本瀏覽器不支持ES新特（nodejs也存在同樣問題，參見），babel就是用來讓你可以使用ES新特性，又可以使代碼運(yùn)行在老版本瀏覽器上。

Babel 通過語法轉(zhuǎn)換器支持最新版本的 JavaScript 。 語法轉(zhuǎn)換插件允許你立刻使用新語法，無需等待瀏覽器支持。

babel工作流程簡(jiǎn)介

解析-->轉(zhuǎn)換-->生成代碼

• 解析生成AST語法樹
• 根據(jù)插件對(duì)AST樹進(jìn)行遍歷轉(zhuǎn)譯并得到新的AST樹（新特性轉(zhuǎn)譯）
• 生成代碼

babel使用

1.在構(gòu)建工具中（以webpack為例）使用：

// 在webpack.config.js中增加babel-loader，如下所示
module: {
 rules: [
 { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
 ]
}

2.在babel-cli中使用

npm install -g babel-cli
babel src -d lib // 將src中的代碼轉(zhuǎn)譯并將生成的文件放到lib目錄下
復(fù)制代碼

babel的配置

babel的配置是要告訴babel工具使用哪些插件轉(zhuǎn)譯代碼，主要作用于babel工作的第二階段（轉(zhuǎn)譯）

babel工作前會(huì)從.babelrc文件讀取配置，根據(jù)配置對(duì)JavaScript進(jìn)行轉(zhuǎn)譯。

下面以.babelrc文件的配置方式為例介紹，配置項(xiàng)主要有兩個(gè)，presets，plugins；

{
 "presets": ["env"],
 "plugins": ["babel-plugin-transform-object-assign"]
}

plugins配置具體插件，而對(duì)于ES新特性需要配置的插件多達(dá)幾十個(gè)，如果一一配置就太麻煩來，于是babel給我們提供一些插件集，插件集配置在presets配置項(xiàng)中，目前官方提供的插件集有：

1. env
2. react
3. flow

其中 env（babel-preset-env）相當(dāng)于 es2015 ，es2016 ，es2017 及最新版本。

4. stage-X

Stage-x preset 中的任何轉(zhuǎn)換都是對(duì)未被批準(zhǔn)為 JavaScript 版本一部分的語言的變化(如 es6 / es2015 )，其分為以下5各階段：

Stage 0 - 稻草人: 只是一個(gè)想法，可能是 babel 插件。
Stage 1 - 提案: 初步嘗試。
Stage 2 - 初稿: 完成初步規(guī)范。
Stage 3 - 候選: 完成規(guī)范和瀏覽器初步實(shí)現(xiàn)。
Stage 4 - 完成: 將被添加到下一年度發(fā)布。

上述配置的插件和插件集也是需要通過npm安裝的

npm install babel-preset-env --save-dev
npm install babel-plugin-transform-object-assign --save-dev

babel presets(轉(zhuǎn)換插件集)配置

"presets": ["env"] // 默認(rèn)將運(yùn)行所有transfrom和集成所有的polyfill

也可以僅僅配置項(xiàng)目所支持瀏覽器所需的polyfill和transform。只編譯所需的代碼會(huì)使你的代碼包更小。如下所示，該轉(zhuǎn)換只支持每個(gè)瀏覽器最后兩個(gè)版本和safari大于等于7的版本所需的polyfill和代碼轉(zhuǎn)換。