vue3中 el-input出现了两个边框

在 Vue3 中，`el-input` 组件的外边框是通过 CSS 样式 `border: 1px solid #dcdfe6;` 来设置的，如果出现了两个边框，可能是因为你在其它地方设置了相同或类似的样式，导致样式冲突。你可以尝试通过以下几种方式解决这个问题：

1. 确认是否有其它样式设置了 `border` 属性，如果有，可以把它们去掉或者修改成合适的值。
2. 确认是否有其它样式设置了 `box-shadow` 属性，如果有，可以把它们去掉或者修改成合适的值。
3. 确认是否使用了其它 UI 框架或组件库，如果有，可能会和 `el-input` 的样式产生冲突，可以尝试禁用或卸载这些组件库。
4. 如果以上方法都无法解决问题，可以考虑使用浏览器的开发者工具查看样式规则的优先级，或者使用 `!important` 关键字来覆盖样式。

相关问题

vue3 <el-form-item <el-input 组合在一起的时候，去除掉<el-form-item的边框

可以通过以下两种方式去除`<el-form-item>`的边框：

1. 使用`slot-scope`自定义表单项的渲染方式，将`<el-input>`放在`<el-form-item>`的内部，然后设置`<el-form-item>`的`border:none`样式。

<template>
  <el-form>
    <el-form-item :label="label" :prop="prop" border:none>
      <template v-slot="{label, error}">
        <el-input :placeholder="label"></el-input>
        <div class="el-form-item__error">{{error}}</div>
      </template>
    </el-form-item>
  </el-form>
</template>

2. 使用 CSS 样式覆盖掉`<el-form-item>`的默认边框样式。

<template>
  <el-form>
    <el-form-item :label="label" :prop="prop" class="no-border">
      <el-input :placeholder="label"></el-input>
    </el-form-item>
  </el-form>
</template>

<style>
  .no-border .el-form-item__content {
    border: none;
  }
</style>

以上两种方式均可以去除`<el-form-item>`的边框。建议使用第一种方式，因为它更加灵活，可以自定义表单项的渲染方式。

vue el-table 里面el-input去除边框

在Vue的Element UI组件中，如果你想在`<el-table>`里嵌套的`<el-input>`去除边框，你可以通过CSS样式来实现。你需要找到这个输入框元素并设置其`border`属性为`none`。例如：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄">
      <template slot-scope="scope">
        <el-input v-model="scope.row.age" class="no-border-input" @input="handleInput(scope.$index, scope.row)"></el-input>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>
.no-border-input {
  border: none; /* 这里设置了无边框 */
  box-sizing: border-box;
}
</style>

在这个例子中，`.no-border-input`类用于选择`el-input`并移除边框。你还可以添加其他自定义样式，比如背景颜色、内边距等。