使用elementUI过程中遇到的问题记录

问题记录

目前已经记录的问题简要描述如下：

1. table组件切换时会有不同程度的长度变化

2. 带输入建议的input中，输入建议显示空白

3. input输入建议的模糊查询

4. table的定位跳转

5. 侧边栏子菜单展开后会多出1px

6. 弹出对话框的抖动问题

解决方案

1.table组件长度变化

如果将elementUI table作为动态组件在页面中显示，第一次显示是正常的，而后续来回切换之后再显示，table会出现不同程度的长度变化，据官方所说这好像是内部的一个小bug。

一种解决方案是在每次切换回表格的时候对数据进行重新加载，在activate生命周期的时候执行下面的方法。

this.$nextTick(() => {
     this.$refs.multipleTable.doLayout();
     // el-table加ref="multipleTable"
 });

2.带输入建议的input组件显示空白

elementUI中提供有带输入建议的input组件使用如下：

<el-autocomplete
class="inline-input"
v-show="show"
v-model="searchName"
:fetch-suggestions="querySearch"
placeholder="名称搜索"
:trigger-on-focus="false"
:model-append-to-body="false"
@select="handleSelect"
></el-autocomplete>

其中实现返回输入建议的是绑定在:fetch-suggestions里的方法，下面的问题3中会提供一种模糊查询的方式。目前遇到的问题是返回建议是空白的，原因在于显示的数据中，输入建议必须是在value字段当中。

3.返回模糊查询的输入建议

input组件通过绑定在:fetch-suggestions里的方法实现输入建议。通常在输入建议当中，我们会返回模糊查询之后的结果，通过以下方式来实现：

//用来实现模糊查找的两个函数
querySearch(queryString, cb) {
    var searchData = this.data;//需要查询的全部数据
    var results = queryString ? searchData.filter(this.createFilter(queryString)) : searchData;
    // 调用 callback 返回建议列表的数据
    cb(results);
},
    
createFilter(queryString) {
    return (searchData) => {
        return (searchData.label.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
    };
},

4.table的定位跳转

目前需要完成的任务是，在输入框中输入了数据，然后表格需要将对应数据行显示当前的第一列。这个功能可以通过获取所需数据行在全部数据中的index，然后通过index进行定位跳转来实现。

//element-ui跳转到指定行
tableScrollMove(refName,index=0){
    if(!refName || !this.$refs[refName]) return//不存在表格的ref vm 则返回
    let vmEl = this.$refs[refName].$el
    if(!vmEl) return
    //计算滚动条的位置
    const targetTop = vmEl.querySelectorAll('.el-table__body tr')[index].getBoundingClientRect().top;
    const containerTop = vmEl.querySelector('.el-table__body').getBoundingClientRect().top;
    const scrollParent = vmEl.querySelector('.el-table__body-wrapper');
    scrollParent.scrollTop = targetTop - containerTop;
},

其中refName表示table表格的ref值，index表示当前需要展示的数据对应的index。

目前遇到的实现情况是，在输入框中输入了对应数据的名称（声优或者动漫的名称），通过监听目前输入框中数据的变化，动态查找到该数据在全部数据中的index，然后调用上面的定位方式。

5.侧边栏子菜单展开后会多出1px

elementUI中提供侧边栏功能，侧边栏展开后子菜单可能会出现宽度多出1px的问题，解决方案如下：

//对table设置以下样式
.el-menu{
    border-right-width: 0;
}

6.弹出对话框的抖动问题

弹出对话框的时候会导致页面抖动，这是因为出现滑块的原因，解决方案如下：

<style scope>
/* 防止打开对话框时页面的抖动 */
body{
  padding-right: 0px !important;
  overflow: hidden;
}
</style>
如果按照上述的设置不会起到作用，因为"<style scope>"中将css样式设定为局部的。所以需要将"scope"去掉。

参考文章

1. element-ui的table，切换路由后高度变小 - SegmentFault 思否
2. element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)_wyhstars的博客-CSDN博客_element input
3. element-ui表格定位到某一行 - yuwenjing - 博客园 (cnblogs.com)
4. element UI 导航栏展开后子菜单宽度多出1px问题_YingDaoMonkey的博客-CSDN博客