前端菜鸟踩坑之路

vue项目中使用elementUI所出现的问题

1.el-button里慎用其他标签

如下图所示，在el-button里嵌套了a标签：

<el-button> <a href=“http://www.baidu.com">继续下载加固包</a> </el-button>

bug:红色框为按钮大小，灰色框为a标签所在区域。这是如果点击蓝色区域所在位置，将不进行跳转，用户体验感降低。 解决方法：（1）将a标签设为行内块级元素，并设置宽高与button一致。 （2）不使用el-button,直接将a标签的样式改为button样式。

2.el-table的使用

<el-table :data="data" max-height="340" :show-header="false" > <el-table-column prop="title" width="220" ></el-table-column> </el-table>

bug:el-table 同时设置 :show-header="false"和 max-height="340"两种属性，会报如下错误： 原因：设置max-height需要找到如下属性： 当table设置show-header:false这一属性，就找不到.el-table__header这一元素了，所以会出现错误。

3.el-tree的使用

如果使用el-tree想实现如下效果 每一行根据内容高度撑开，需要设置以下属性

el-tree { &-node__content{ height: auto; }

3.el-form使用resetFields(重置表单)属性

<el-dialog title="信息填写" :visible.sync="outerVisible" width="400px"> <el-form label-position="left" ref="ruleForm" label-width="80px" :model="formLabelAlign"> <el-form-item label="姓名" prop="name"> <el-input v-model="formLabelAlign.name"></el-input> </el-form-item> <el-form-item label="手机号" prop="phoneNumber"> <el-input v-model="formLabelAlign.phoneNumber"></el-input> </el-form-item> <el-form-item label="企业名称" prop="companyName"> <el-input v-model="formLabelAlign.companyName"></el-input> </el-form-item> <el-form-item prop="button"> <el-button @click="handleCancel('ruleForm')">取消</el-button> <el-button type="primary">确定</el-button> </el-form-item> </el-form>

注意：使用resetFields属性时一定要给每个el-form-item加上props属性，这样重置表单才能生效。

使用vue-infinite-loading实现表格滚动加载

代码如下

<template> <div> <div style="margin: 30px 40px 20px 60px "> <h4>权限信息</h4> <el-table :data="permissionValue" max-height="289" border style="width: 100%"> <el-table-column label="权限项" prop="value"></el-table-column> <el-table-column label="权限描述" prop="des"></el-table-column> <template v-if="allPermissionValue.length > 5" slot="append"> <infinite-loading ref="Infinite" @infinite="infiniteHandler" spinner="circles" force-use-infinite-wrapper=".el-table__body-wrapper" > <div class="infinite-loading-noMore" slot="no-more">没有更多了...</div> <div slot="no-results"></div> </infinite-loading> </template> </el-table> </div> </div> </template> <script> import PermissionValueDictionary from "./formatPermissionValue.js"; import InfiniteLoading from "vue-infinite-loading"; export default { props: { data: { type: Object, required: true } }, data() { return { permissionValue: this.data.slice(0, 9), allPermissionValue: this.data }; }, methods: { //无限滚动触发的函数 infiniteHandler($state) { setTimeout(() => { var temp = this.permissionValue.length; if (temp == this.allPermissionValue.length) { $state.complete(); return; } temp += 4; this.permissionValue = this.allPermissionValue.slice(0, temp); $state.loaded(); }, 1000); } }, components: { InfiniteLoading } }; </script>> <style lang="scss" scoped> .infinite-loading-noMore { margin: 10px 0; } </style>

注意：需加上force-use-infinite-wrapper=".el-table__body-wrapper"这一属性，保证监听的滚动是在此表格上的滚动，而不是全屏幕的滚动。

使用echarts时遇到的问题

当一个页面内有多个图表，并且这些图表都设置了以下属性

//浏览器大小改变时重置大小 window.onresize = function () { myChart.resize(); };

那么只有最后一个图表会自适应，因为window.onresize事件会冲突并覆盖。 解决方法：使用window.addEventListener给每个图表绑定resize事件

window.addEventListener("resize", function() { myChart.resize(); });