[elementPlus] teleported 在 ElSubMenu中的用途-CFANZ编程社区

1.去掉表格横线

去掉表格横线

1.1去掉表格内的线

方法一：在el-table标签中设置类class="this_table"，再深度穿透修改表格线

<template>
    <div class="">
        <el-table class="this_table" :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>
    </div>
</template>

/* 去除表格的边框 */
.this_table ::v-deep td.el-table__cell {
    border: none;
}

.this_table ::v-deep th.el-table__cell {
    border: none;
}

方法二(避免全局污染，最好不要这样用)：

<style>
    table th,
    table td {
        border-bottom: none !important;
    }
</style>

1.2去掉表格最下面的线

以elemen-ui中的第一个表格为例

.el-table::before {
    content: none;
}

2.element.style

element.style的出现一般是因为在标签中使用了style。

修改element.style

3.当给多个div的父级设置了display:flex，那么这些div会由一列变成一行。

原因：display:flex相当于给父级容器和子级项目分别设置了6个属性：

父级容器：

子级容器：

4.进度条的使用：使用display:flex;的时候，进度条需要有固定宽度（例如：width:200px）才可以显示，就算时width:90%;也还是不行的。

5.CSS中

6. CSS选择器，+选择的是当前元素的后面的第一个兄弟元素，注意两个元素必须有同一个父元素。下面代码.el-button+.el-button表示选中一个按钮后面的第一个兄弟元素，并让这个兄弟元素的做外边距设置为3.5rem。

::v-deep .el-button+.el-button {
    margin-left: 3.5rem;
}

7.分割线

7.1分割线调不了宽度，就在外面包一层div，外面的div设置padding(组件改不了的时候，可以试试套一层，通过改父级影响子集)

修改对话框的宽度，不一定是百分比，也可以使用其他单位

<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
</el-dialog>

8.表单

8.1表单标签宽度

法一：在el-form标签中加入label-width属性，并设置宽度即可，例如：

label-width="70px"

法二：在el-form标签中加入class="xxx"，并设置white-space: nowrap;例如：

.from{
  white-space: nowrap;
}

8.2修改输入框的placeholder

::v-deep input::placeholder{
  color: green;
}

8.3 将textarea的placeholder字体设置成与输入框的字体一样

::v-deep textarea::placeholder {
  font-family: Arial;
}

注意：设置输入框的placeholder：

::v-deep input::placeholder {
  
}

8.4修改表单标签的位置

8.4.1修改表单全部标签的位置（例如：所有标签的位置在表单上方）

在el-form标签中加入label-position属性，例如：

label-position="top"

8.4.2 修改表单部分标签的位置（例如：只有指定的一个标签的位置在表单上方）

步骤一：在el-form-item标签上设置一个类（例如class="upload"）

步骤二：

.upload ::v-deep .el-form-item__label {
    float: none;
    margin-left: 4rem;
}

9.修改上传文件列表的位置、宽度等，以修改宽度为例

步骤一：在el-form-item标签上设置一个类（例如class="upload"）

步骤二：

.upload ::v-deep .el-upload-list{
  width: 200px;
}

10.

::v-deep .el-input__count{
  height: 1rem;
  line-height: 1rem;
}

11.

12. 修改图标icon

步骤一：在浏览器查看原来的图标样式

步骤二：在浏览器查看所需改成的图标的content

步骤三：修改样式

::v-deep .el-icon-arrow-up:before{
  content: "\e78f";
  color: #606266;
}

13.表单标签星星

13.1使用表单验证会在相应需要进行验证的标签前面自动加上星星

13.2可以取消使用表单验证的标签前面的星星

::v-deep .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    content: none;
}

13.3在特定表单项的label前面加上星星

法一：

步骤一：在相应的el-form-item标签加上类，例如class="test"

步骤二：

.test ::v-deep .el-form-item__label::after {
  content: '*';
  color: #EC5556;
}

法二：

步骤一：在相应的el-form-item标签加上类，例如class="test"

步骤二：

::v-deep .test{
  position: relative;

  .el-form-item__label::after{
    content: "*";
    color: #EC5556;
  }
}