1、el-dialog中的form使用resetFields报错“Cannot read property 'resetFields' of undefined”
原因是在弹窗新增对话框前 form表单并没有编译渲染进dom里面 所以导致this.$refs['form'].resetFields(); 报错
解决方法：
this.$nextTick(()=>{
this.$refs['formData'].resetFields();
})2、使用el-dialog新增和编辑时，本来已在data里定义了表单各项数据的原始值，编辑后点击新增，表单无法重置
原因是form表单的重置是以第一次打开的数据作为重置标准，如果先打开的是编辑，那么重置是以本次编辑的数据数据作为标准
解决方法：
1、编辑时，先让el-dialog显示，再使用setTimeout延迟赋值编辑数据，这样使得编辑时的form表单第一次打开的数据为原始数据
this.formVisible = true;
setTimeout(()=>{
this.formData.id = row.id
this.formData.name = row.name;
...
},100);2、在关闭el-dialog时重置表单数据
closeForm(){
this.$refs['form'].resetFields();
}3、点击侧边栏 刷新当前路由
解决方法：
点击侧边栏菜单时，先跳转到Redirect 页面，在Redirect页面再将路由重定向到想去的页面，这样就起到了刷新的效果了。
Redirect页面和路由配置admin后台自带的有，只需修改 @/views/layout/components/Sidebar/Link.vue 文件 中的 linkProps
<template>
<!-- eslint-disable vue/require-component-is -->
<component v-bind="linkProps(to)">
<slot />
</component>
</template>
<script>
import { isExternal } from '@/utils/validate'
export default {
props: {
to: {
type: String,
required: true
}
},
methods: {
linkProps(url) {
if (isExternal(url)) {
return {
is: 'a',
href: url,
target: '_blank',
rel: 'noopener'
}
}
return {
is: 'router-link',
to: '/redirect' + url //在url前加上/redirect即可
}
}
}
}
</script>4、el-table里利用index进行排名的显示
el-table-column 里使用type="index"可以获取到当前行的行数，但翻页会重置行数，也就是第二页后行数也是从1开始，如果要做排名的显示显然不合适，这时可以使用方法实时改变翻页的index
<el-table-column type="index" :index="indexMethod" width="50" ></el-table-column>
....
indexMethod(index) {
return (this.listQuery.page-1)*this.listQuery.limit+index+1;
}5、自定义el-table默认的暂无数据显示
在与el-table-column同级加上一个slot="empty"的template即可
<el-table-column> <template slot="empty"> <p>我是自定义暂无数据</p> </template> </el-table-column>
6、自定义el-table默认的暂无数据显示
左侧菜单导航展开一个二级菜单，其他已展开的关闭（始终只展开一个）
文件位置：src/layout/components/Sidebar/index，将el-menu标签下的unique-opened值改为true
7、input聚焦时全选内容功能的实现
<el-input @focus="inputFocus($event)" v-model="val"></el-input>
methods:{
inputFocus(e){
e.currentTarget.select();
}
}8、同一个页面使用两个el-table，使用v-if切换不同的表格来显示不同的数据，当切换到第二个表格暂时数据时，会使用第一个表格的el-table-column
解决方法：给两个表格设置不同的key
<el-table :data="listsData" key="tb1"></el-table> <el-table :data="listsData" key="tb2"></el-table>
9、点击左侧router菜单新开页面
1）修改layout/components/SidebarItem.vue，增加用于新开页面的属性
:target="onlyOneChild.target==true?'_blank':''"
2）在路由文件里增加target参数
target: true
10、el-table同时使用高度height和合计show-summary时，合计不显示
解决方法：
1、给table添加一个ref
2、在加载数据后，试用el-table自带的方法doLayout对table进行重新布局
this.$nextTick(()=>{
this.$refs.dataTable.doLayout()
})11、el-table对type="selection"列禁用某些行
template中：
<el-table-column type="selection" :selectable="checkSelectAble" align="center" width="55"></el-table-column>
javascript中：
checkSelectAble(row,rowIndex){
if(row.type == 2) return true;
else return false;
},12、el-breadcrumb-item标签点击事件无效
只需将平时写法@click改成@click.active就可以
<el-breadcrumb-item @click.native="handleClick">目录</el-breadcrumb-item>
13、el-upload 同时选取多文件上传，文件列表却只显示最后一个文件
解决方法是在on-success回调中等待所有文件都上传成功才进行操作
uploadFileSuccess(response, file,fList){
//等待所有文件都上传完成，这里注意fList是所有的文件（包含已上传的）
if (fList.every(v => v.status == 'success')) {
console.log('处理字段')
//处理字段
fList.map(item => {
this.uploadFileList.push(item);
})
}
},14、el-upload本地运行有进度条，到部署到服务器的生产环境就不显示
解决方法是在main.js找到mock，注释掉
el-upload的 const xhr = new XMLHttpRequest() 而mockjs会重新声明一个XMLHttpRequest导致el-upload的progress失效
