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

使用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>

input与textarea字体不一样

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

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

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