项目中常用的element样式修改，功能实现 --持续更新

心已赠人 2021-09-02 09:21 446阅读 0赞

# 10.17记录 #

### el-timeline专区 ###

实现功能：大环节嵌套小环节。若小环节只有一条数据，则不竖线显示。小环节最后一条数据，也不显示竖线

<el-timeline>
              <el-timeline-item v-for="(activity, index) in outWrapList" :key="index" :timestamp="activity.Name" placement="top">
                
                <el-timeline-item
                  class="in-wrap"
                  v-for="(activitySub, indexSub) in activity.Proof"
                  :key="indexSub"
                  :timestamp="activitySub.Title"
                  placement="top"
                  :class="{'nolast-lineTwo': outWrapList.length === index + 1, 'nolast-line': activity.Proof.length === indexSub + 1 && outWrapList.length === index + 1}"
                >
                  <div v-if="activitySub.Type === 2" class="pic-preview">
                    <li v-for="(itemS, indexS) in activitySub.List" :key="indexS">
                      <img :src="itemS.url" alt />
                    </li>
                  </div>
                  <li v-else>{ {  activitySub.Content }}</li>
                </el-timeline-item>
              </el-timeline-item>
            </el-timeline>

先来说说`el-timeline` 他是做了处理的，但是是针对，只有一条环节。会把最后一条线display:none

解决: 通过索引。添加类名。增加或者去掉线  
`:class="{'nolast-lineTwo': outWrapList.length === index + 1, 'nolast-line': activity.Proof.length === indexSub + 1 && outWrapList.length === index + 1}"`

.nolast-lineTwo { 
        /deep/ .el-timeline-item__tail { 
          display: block !important ;
        }
      }
      .nolast-line { 
        /deep/ .el-timeline-item__tail { 
          display: none !important ;
        }
      }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center]

# 10.19记录 #

### el-table专区 ###

1.  修改表头样式

<el-table
            :header-cell-style="{ background: '#e4e6ed' }"
            :data="reviewList"
            style="width: 98%"
            stripe
          >

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 1]

1.  修改间隔样式  
    可能你会用 `stripe` 属性 来设置斑马效果。但是如果需求是将斑马颜色奇数偶数变化位置。或者自定义斑马颜色 `:row-class-name="tableRowClassName"`

<el-table
            :header-cell-style="{background:'#fff'}"
            :data="recodeList"
            border
            style="width:98%"
            :row-class-name="tableRowClassName"
          >

tableRowClassName 是一个事件

tableRowClassName ({  row, rowIndex }) { 
          if (rowIndex % 2 === 0) { 
            return 'success-row'  // 代表偶数行 要显示的样式类
          } else { 
            return 'normal-row' // // 代表基数行 要显示的样式类
          }
        }

/deep/ .el-table .success-row { 
        background: #f6f8fb;
      }
      /deep/ .el-table .normal-row { 
      background: #fff;
    }

1.  多数据表单验证  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 2]  
    思路：  
    (1) 对表单的所有引用，进行校验(通过返回true，不通过返回false)。将校验的结果放到一个数组。  
    (2) 对数组的每一项，进行every

> every() 方法使用指定函数检测数组中的所有元素：  
> 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。  
> 如果所有元素都满足条件，则返回 true。  
> 注意： every() 不会对空数组进行检测。  
> 注意： every() 不会改变原始数组。

(3)如果所有元素都校验通过，则都会返回true，那么通过every校验，返回的也是true  
。此时，才可以进行下面的表单提交操作  
代码

const newArr = []
            for (var v = 0; v < this.$refs.ruleAddFormRef.length; v++) { 
              this.$refs.ruleAddFormRef[v].validate(async (valid) => { 
                if (valid) { 
                  newArr.push(true)
                } else { 
                  newArr.push(false)
                }
              })
            }
           
              this.flag = newArr.every((val) => { 
                return val === true
              })
            }
          }
          if (this.flag) { 
                   走表单数据提交操作
          }

# 11.13 记录 element-Menu 专区 #

1.  如何优雅的实现选中区域

:default-active="activeMenu"
    computed(){
      activeMenu() {
          const route = this.$route
          const { meta, path } = route
          // if set path, the sidebar will highlight the path you set
          if (meta.activeMenu) {
            return meta.activeMenu
          }
          return path
        }
    }
    ,
     {
            path: 'edit/:fileName(\\w+)',
            component: () => import('@/views/book/edit'),
            name: 'EditBook',
            meta: { title: '编辑图书', noCache: true, activeMenu: '/book/list' },
            hidden: true
          }

# 12.5记录 #

### 修改element 表格的某一列的样式 ###

<el-table
              :header-cell-style="{
                background: '#eef1f6',
                borderTop: '1px solid #333',
                borderRight: '1px solid #333',
                borderBottom: '1px solid #333',
              }"
              :cell-style="changeCellStyle"
              @sort-change="changeSort"
              :default-sort="{ prop: 'absLastRate', order: 'descending' }"
              :data="tableData"
              border
              style="width: 80%"
            >
              <el-table-column
                class="table_left"
                sortable
                prop="symbol"
                label="交易所"
                width="180"
              >
                <template slot-scope="scope">
                  <div class="left_sty">
                    <span>{
       { scope.row.exchangeName }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                sortable
                prop="symbolName"
                label="币对(%)"
                width="180"
              >
                <template slot-scope="scope">
                  <a
                    :href="scope.row.symbolFutureHref"
                    style="text-decoration: none"
                    target="_blank"
                  >
                    <span>{
       { scope.row.symbolName }}</span>
                  </a>
                </template>
              </el-table-column>

changeCellStyle(row, column, rowIndex, columnIndex) { 
          console.log(row, column, rowIndex, columnIndex);
          // 列的label的名称
          if (row.column.label === "交易所") { 
            return "background: #eef1f6;fontWeight:800"; // 修改的样式
          } else { 
            return "";
          }
        },

直接在行内写也可以。。。

# 5.11 el-upload #

<el-upload
                class="avatar-uploader"
                action=""
                list-type="picture-card"
                :auto-upload="true"
                :limit="1"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :http-request="uploadFile"
                :file-list="fileList"
                :on-exceed="handleExceed"
                :before-upload="beforeUploadFunc"
                accept=".jpg,.png,.jpeg"
              >

// 上传题目图片
        newUploadFile(params) { 
          this.upload(params, "thumbnailUrl");
        },
      // 图片限制
        beforeUpload(file, url) { 
          const isLt2M = file.size / 1024 / 1024 < 2;
          if (!isLt2M) { 
            this.$message.error("请上传2M以下的.png .jpg .jpeg文件");
            return false;
          }
          return true;
        },
    
     upload(params, url) { 
          const _file = params.file;
    
          // 通过 FormData 对象上传文件
          var formData = new FormData();
          formData.append("imageFile", _file);
    
          upPicture(
            formData,
            (res) => { 
              console.log(res);
              this.material[url] = res.data.data;
            },
            () => { 
              console.log("error");
            }
          );
        },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/0da097ef2a1b4a3682ce60f04dd69934.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210813/af042775b5f24412afec9bab4e28d79b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210813/04d254d22a894d4b8e8e3ddc2f2b1098.png