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

10.17记录

el-timeline专区

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

 <el-timeline>
          <el-timeline-item v-for="(activity, index) in outWrapList" :key="index" :timestamp="activity.Name" placement="top">
            <!-- {{outWrapList}} -->
            <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 ;
    }
  }

10.19记录

el-table专区

1. 修改表头样式

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

2. 修改间隔样式
   可能你会用 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;
}

3. 多数据表单验证
   
   思路：
   (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");
        }
      );
    },