前端菜鸟踩坑之路

最新推荐文章于 2025-10-03 15:36:35 发布

原创最新推荐文章于 2025-10-03 15:36:35 发布 · 709 阅读

0 ·

CC 4.0 BY-SA版权

工作专栏收录该内容

4 篇文章

订阅专栏

本文记录了在Vue项目中使用ElementUI组件时遇到的问题，包括el-button内的a标签使用不当导致的用户体验问题，el-table设置属性后的错误，el-tree的自适应高度配置，el-form resetFields属性应用的注意事项，以及使用vue-infinite-loading和echarts时的常见错误和解决策略。

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();
      });