篇文章主要总结了一些在项目中遇到的一些小问题以及对应的解决方案，避免日后踩坑，后续补充中，如果你对这些问题有不同的解答，欢迎评论

1. 输入框使用v-model 绑定值，但是不能改变

// 第一种情况
<el-input v-model="form.title"></el-input>
// 初始化
data () {
 return {
 form: {}
 }
}
// 赋值,其中formData为父组件传过来的数据
mounted (){
 this.form.title = this.formData.title
}
// 感觉并没有什么问题，但是就是不好用，解决办法就是单独赋值
data () {
 return {
 form: {},
 title: ''
 }
}
// 第二种情况
在表单中使用时，用:model=""给输入框赋值
<el-form :model="formData">
 <el-form-item>
 <el-input placeholder="请输入" :model="formData.value" size="small"/>
 </el-form-item>
</el-form>
// 解决方案，改为
<el-input placeholder="请输入" v-model="formData.value" size="small"/>
复制代码

2. 文本内容不对html标签转译

我想要输入下面的内容，但是保存数据后，就变成了aaa

解决办法： 如果是html内容、javascript、xml或其他特殊内容，使用<xmp></xmp>

如果是有空格和回车这样的特殊字符的简单文本 在文本外加<pre></pre> 标签

3. 基础导出功能

SensitiveOperationExport(params).then(res => {
 if (res.data.code === '200') {
 // 这里是导出
 window.location.href = res.data.data.path
 this.$message({
 message: '导出成功！',
 type: 'success'
 })
 } else {
 this.$message.error({message: '导出失败！'})
 }
 })
复制代码

4. 使用element table 时，禁用部分复选框

<el-table-column type="selection" align="center" fixed :selectable="selectable"></el-table-column>
复制代码

官网上有这样一个操作 selectable, 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选

5.接口返回的数据为json类型，展示到表格中时，可以这样转换

// 数据结构 content: "{'title': '这是标题'}"
this.title = JSON.parse(content).title
复制代码

6. 列表中点击图片放大功能

安装viewer，可支持图片的切换，旋转，放大等功能，具体操作文档可百度查看，使用在页面中也非常简单，第一步，全局配置

// main.js 中引入配置
Viewer.setDefaults({
 'zIndex': 9999,
 'inline': false, // 是否默认展示缩略图
 'button': true, // 右上角按钮
 'navbar': true, // 底部缩略图
 'title': true, // 当前图片标题
 'toolbar': true, // 底部工具栏
 'tooltip': true, // 显示缩放百分比
 'movable': false, // 是否可以移动
 'zoomable': true, // 是否可以缩放
 'rotatable': true, // 是否可旋转
 'scalable': true, // 是否可翻转
 'transition': true, // 使用 CSS3 过度
 'fullscreen': true, // 播放时是否全屏
 'keyboard': true, // 是否支持键盘
 'url': 'data-source'
})
// 页面中使用
<viewer>
<img :src="scope.row.content "/>
</viewer>
复制代码

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('已经是最后一条，不可下移')
 } else {
 let downDate = this.tableData[index + 1]
 this.tableData.splice(index + 1, 1)
 this.tableData.splice(index, 0, downDate)
 }
}
复制代码

8. 表格的全选和反选

<el-table :data="tableData" border :select-all="allSelect" @selection-change="changeFun" ref="form" height="700"></el-table>
// tableData 是表格数据
<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)
 })
 }
 }
 },
 // 获取选择的数据
 changeFun (val) {
 this.data = val
 }
复制代码

9. 按住说话功能

这个功能依赖于recorder.js, 上一篇文章已经介绍过用法了，这里就不在细说

10. 表格编辑和保存切换

// editColorShow: '' // 设置敏感操作默认显示编辑
// 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
 }
复制代码

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
 }
}
复制代码

第二种

function copy (obj) {
 var newObj = obj.constructor === Array ? [] : {}
 newObj = JSON.parse(JSON.stringify(obj))
 return newObj
}
复制代码

12.表单重置问题

之前重置表单的时候都是this.form.xx='',如果是一两个还好，但是如果表单很多的话就不是很适用了，发现了一个很便捷的操作，只要一行代码就搞定了

this.$refs['infoForm'].resetFields() 
// 前提是要重置的输入框必须设置prop属性才可以
复制代码

13. txt文件导出，有两种方式

第一种 纯前端下载

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)
}))
复制代码

第二种 获取到txt的内容后下载

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)
 }
复制代码

虽然两种都可以实现下载，但是要保证下载的接口可以在页面中访问到，不会有跨域等问题

14. 导出exel

导出表格这里提供两种方法，第一种依赖第三方，首先下载三个依赖

下载Blob.js和Export2Excel.js 两个文件，引入文件中

// npm install file-saver xlsx script-loader --save
// 导出
 onExportExcel (formName) {
 import('@/vendor/Export2Excel').then(excel => {
// 表格的title
 const tHeader = ['订单编号', '姓名', '员工编号', '手机号', '公司']
// 对应的字段 
 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
 }
复制代码

第二种 通过vue-json-excel，具体细节可参考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 {
// 要导出的字段
 json_fields: {
 'Complete name': 'name',
 'City': 'city',
 'Telephone': 'phone.mobile',
 'Telephone 2' : {
 field: 'phone.landline',
 callback: (value) => {
 return `Landline Phone - ${value}`;
 }
 },
 },
// 要导出的数据
 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'
 }
 ]
 ]
}
}
复制代码

15.导航栏中使用iconfont，选中不变色问题

先来看看对比

项目是基于element-ui开发的，避免不了使用到图标，所以阿里图库是个很好的选择，这里遇到的问题是左侧导航栏选中后，文字颜色发生变化，但是图标却一直不变，一般来说引用阿里图库有三种方式：Unicode、Font Class 、symbol；我用的是symbol方式引用，具体如下

1.图标选用的是svg格式，选择要使用的图标，下载svg格式

2.创建icon文件夹用于存放图标，创建svgIcon文件夹用于使用图标，使用如下

3.这里导致图标不变色的原因是下载的图标本身就是带有颜色的，那么在通过symbol获取图标时会在svg的path中增加fill属性，导致无法更改颜色，可以将图标中fill属性置空，这样就可以解决了

何在前端JavaScript开发中使用ES新特性？babel是什么？.babelrc文件又是干什么用的？文件中的presets和plugins又是什么鬼？本文将解答上述疑问。

babel是什么

babel是一个JavaScript编译器

为什么要babel

ES规范今年来更新较为频繁，近几个版本推出很多新的特性，而用户的浏览器版本众多，很多用户用的是老版本浏览器，老版本浏览器不支持ES新特（nodejs也存在同样问题，参见），babel就是用来让你可以使用ES新特性，又可以使代码运行在老版本浏览器上。

Babel 通过语法转换器支持最新版本的 JavaScript 。 语法转换插件允许你立刻使用新语法，无需等待浏览器支持。

babel工作流程简介

解析-->转换-->生成代码

• 解析生成AST语法树
• 根据插件对AST树进行遍历转译并得到新的AST树（新特性转译）
• 生成代码

babel使用

1.在构建工具中（以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中的代码转译并将生成的文件放到lib目录下
复制代码

babel的配置

babel的配置是要告诉babel工具使用哪些插件转译代码，主要作用于babel工作的第二阶段（转译）

babel工作前会从.babelrc文件读取配置，根据配置对JavaScript进行转译。

下面以.babelrc文件的配置方式为例介绍，配置项主要有两个，presets，plugins；

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

plugins配置具体插件，而对于ES新特性需要配置的插件多达几十个，如果一一配置就太麻烦来，于是babel给我们提供一些插件集，插件集配置在presets配置项中，目前官方提供的插件集有：

1. env
2. react
3. flow

其中 env（babel-preset-env）相当于 es2015 ，es2016 ，es2017 及最新版本。

4. stage-X

Stage-x preset 中的任何转换都是对未被批准为 JavaScript 版本一部分的语言的变化(如 es6 / es2015 )，其分为以下5各阶段：

Stage 0 - 稻草人: 只是一个想法，可能是 babel 插件。
Stage 1 - 提案: 初步尝试。
Stage 2 - 初稿: 完成初步规范。
Stage 3 - 候选: 完成规范和浏览器初步实现。
Stage 4 - 完成: 将被添加到下一年度发布。

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

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

babel presets(转换插件集)配置

"presets": ["env"] // 默认将运行所有transfrom和集成所有的polyfill

也可以仅仅配置项目所支持浏览器所需的polyfill和transform。只编译所需的代码会使你的代码包更小。如下所示，该转换只支持每个浏览器最后两个版本和safari大于等于7的版本所需的polyfill和代码转换。