项目中常用的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
      >

在这里插入图片描述

  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. 多数据表单验证
    在这里插入图片描述
    思路:
    (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
      }
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页