Vue-elementui的输入框删除边框

问题描述

在项目中我想要删除element输入框的边框,看了看网上的解决方案,用了什么!important给样式加优先级,也有使用样式穿透的,我这里使用样式穿透的方式.

解决方法

1.页面代码

展示的表格

  <el-form
        :model="form"
        label-width="120px"
      >
        <el-form-item label="在线押金/元:">
          <el-input
            class="rule-input"
            type="text"
            readonly
            v-model="form.cashPledge"
          ></el-input>
        </el-form-item>
</el-form>

修改的表格

 <el-form :model="editForm" label-width="120px">
        <el-form-item label="在线押金/元:">
          <el-input
            type="text"
            class="rule-input-edit"
            v-model="editForm.cashPledge"
          ></el-input>
        </el-form-item>
 </el-form>

readonly属性用来控制不可输入,要不然清空了边框还可以输入,就不是我想要的效果
修改的表单和显示的表单用了两个,按理可以整合到一个上,我太笨了,这里用了笨方法.

2.样式代码

<style scoped lang="scss">
  .rule-input ::v-deep {
    .el-input__inner {
      border: 0;
    }
  }
  .rule-input-edit ::v-deep {
    .el-input__inner {
      border: 0;
      border-radius: 0px;
      &:focus {
        border-bottom: 1px solid #409eff;
      }
    }
  }
  .el-form-item {
    margin-bottom: 10px;
  }
</style>

使用了scss预处理器,可以很方便的写出input聚焦的样式
css3的穿透语法>>>在scss中不起作用,可以使用v-deep或者/deep/.

3.实际效果