使用element-ui碰到的问题总结

自定义element-ui失效问题

例如想将input输入框和button放在一行进行显示。

<div class="text">
   <el-input   v-model="searchText"
          placeholder="搜索项目名称"
          prefix-icon="el-icon-search">
   </el-input>
   <el-button  type="primary"
          @click="clickSerarch()"
          style="margin-left: 5px"
    >查询</el-button>
   <el-button type="primary" @click="clickAdd()">添加</el-button>
</div>

实现如下图所示的样式

但是实际在使用中，发现有时候样式会失效。出来的效果如下图所示

通过开发者工具调试，发现页面的样式已被其他页面的样式覆盖，导致当前样式失效。

解决办法：

	1、style标签 加上scoped
	2、编写样式时机上 /deep/

<style scoped>
.body /deep/ .el-button{
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 25px;
  width: 100%;
  line-height: 1.2;
}
</style>

select下拉框选中获取当前item数据

在下拉框选中时，获取当前选中的item数据信息。

解决办法：

1、value设置为当前的item对象
2、el-option中添加:key="item.id"的属性;
3、el-select添加value-key="id"属性(value-key的值与key绑定的属性值对应)

<el-select v-model="projectValue" placeholder="请选择项目编号" @change="currentSel" value-key="xmIncode">
  <el-option :label="item.xmbh" :value="item"
         v-for="item in projectList" :key="item.xmIncode">
    <span style="float: left;>{{ item.xmmc }}</span>
    <span style="float: right; color: #8492a6;">{{ item.xmbh }}</span>
   </el-option>
</el-select>

延伸问题：当使用item绑定时，若projectValue绑定的model值不在projectList中，会不在页面中显示。

解决办法：使用了笨办法，获取到列表后，判断当前projectList是否包含projectList，不包含则展示在el-option中，并设置为禁选

<el-option :label="uchose.xmbh" 
    value="uchose"
    :key="uchose.xmIncode"
    disabled v-if="uchose.xmIncode !== 0"
>
  <span style="float: left;">{{ uchose.xmmc }}</span>
  <span style="float: right;">{{ uchose.xmbh }}</span>
</el-option>

input与textarea字体不一样

input和textarea在输入信息后可以发现字体样式不一样，如下图所示。

解决办法，修改el-textarea__inner字体样式

.body .el-textarea__inner{
  font-family: 'Source Sans Pro', sans-serif;
}

el-table表头与内容右边框错位

在使用el-table时发现，表头右边的边框会有两个，导致表头相对于内容偏移错位。
解决办法，修改el-table样式

.el-table th.gutter {
display: table-cell!important;
}

el-table固定表头

el-table固定表头需要设置固定高度，当数据过少时，下方会有一条线。
修改了原有表格border信息解决该问题。

.el-table th.gutter{
  display: table-cell!important;
}
.el-table--border th.gutter:last-of-type { 
  border-right: 1px solid #EBEEF5;
}
.el-table__row td:not(.is-hidden):last-child{
  right: 1px;
}
.el-table__row th:last-child{
  right: 1px;
}
.el-table--border, .el-table--group{
  border: none;
}
.el-table th {
  border-top: 1px solid #EBEEF5;
}
.el-table th:first-child,.el-table td:first-child{
  border-left: 1px solid #EBEEF5;
}
.el-table th:nth-last-child(2){
  right: 1px;
  border-left: 1px solid #EBEEF5;
}
.el-table tr{
  border-right: 1px solid #EBEEF5;
}
.el-table td {
  border-bottom: 0.5px solid #EBEEF5;
  bottom: 2px;
} 
.el-table--border::after, .el-table--group::after, .el-table::before{
  background-color: #fff;
}

el-menu 侧导航栏展开子菜单宽度溢出问题

侧导航栏展开子菜单时，子菜单的宽度会宽1px。修改el-menu样式即可。

.el-menu {
  border-right-width: 0;
}

el-cascader用filterable时，change获取不到label值

问题描述：
使用el-cascader时，使用filterable进行搜索并选中值，change方法中getCheckedNodes()为空
解决办法：

this.$nextTick(() => {
   this.$refs['optionsId'].getCheckedNodes()
})