精华内容
下载资源
问答
  • el-timeline
    2022-04-11 11:15:39
           <el-row >
                    <el-timeline :reverse="true">
                      <el-timeline-item
                          v-for="(item,index) in items"
                          :key="index"
                          :timestamp="item.timestamp"
                          :type="index==items.length-1?'primary ':''">
                        {{ item.msg }}
                      </el-timeline-item>
                    </el-timeline>
           </el-row>

    思路:

    当对数组进行循环遍历的时候,item代表每一个对象,index代表循环遍历元素的下标,下标从0开始。想要获取当前数组的最后一个元素:items.length-1 

    假如数组长度为四,数组中最后一个元素的下标就是3 和 items.length-1 代表的是同一个元素。

    通过组件中  :type的使用就可以对最近节点进行渲染。

    更多相关内容
  • </div> </el-timeline-item> <el-timeline-item size="large" class="las"> </el-timeline-item> </el-timeline> </div> </div> </template> <script> import vLoading from '@/components/ui/loading.vue';...

    最终效果图

    在这里插入图片描述

    注意:

    这里接口是请求一次返回20条数据,请求一次传回需要的参数,没有做分页的,但是跟分页差不多,当滚动条到达底部一次就请求一次,特别是滚动条触底判断需要的可视高度等,需要给页面的整个div给一个id,这里我的是id="iii",如果给的是时间轴的id,那下面的高度判读等都需要改变一下

    解决滚动条到底部之后,拖动滚动条到头部之后,再滚动到底部重复请求接口问题:

    //第一步:在data里面设置默认值
     oldv: 0,
     
    //第二布:在接口请求方法getdata()中当res.code=0时,设置this.loading = true;
    
    //第三步:在handleScroll()方法中判断滚动条到达底部时设置this.loading = false;
    if (scrollTop + windowHeight >= scrollHeight && this.loading) {
        this.loading = false;
        this.getData();
    }
    
    

    完整代码:

    <template>
      <div class="card-content time" id="iii">
        <v-loading v-if='hide'></v-loading>
        <div class="detailTime-style" >
          <el-timeline>
            <el-timeline-item size='large' class="fir"><br/></el-timeline-item>
            <el-timeline-item  
            v-for="(item, index) in lineData"
            :key="index"
            :icon="item.icon"
            :type="item.type"
            :size="item.size"
            >
     
              <!-- 时间线左侧 -->
              <div class="companydel">
                  {{item.startTime}}{{item.endTime}}
              </div>
              <!-- 时间线右侧 -->
              <div class="contentdel">
                <span>主机 </span>
                <span style="color: #3d87f2;">{{item.host}}</span>
                
                <span> 受到 </span>
                <span style="color: #dc4e47;">{{item.attackHost}}</span>
    
    
                <span> 进行了 </span>
                <span  class='high_type' v-if="item.classification.AttackLevel == 3">{{item.classification.AttackType}}</span>
                <span  class='medium_type' v-if="item.classification.AttackLevel == 2">{{item.classification.AttackType}}</span>
                <span  class='low_type' v-if="item.classification.AttackLevel == 1">{{item.classification.AttackType}}</span>
                <span> 攻击,</span>
    
                <span> 攻击次数 </span>
                <span style="color: #dc4e47;">{{item.attackCounts}}</span>
                <span> 次,</span>
    
    
                <span> 该攻击状态 </span>
                <span v-if="item.attackSuccess == false" class="statusfalse">尝试</span>
                <span v-if="item.attackSuccess == true" class="statustrue">成功</span>
              </div>
     
            </el-timeline-item>
            <el-timeline-item size="large" class="las"><br/></el-timeline-item>
          </el-timeline>
        </div>
      </div>
       
    </template>
    <script>
    import vLoading from '@/components/ui/loading.vue';
    
        export default {
          name: "detailTime",
          components: { vLoading },
          data(){
            return{
              hide: false,
              drawer: false, 
              page: 1,//页码
              pageNum: 20,//每页20条
              loading: false, //是否显示loading效果
              lineData: [],
              moreIndex: 0,
              tableName: '',
              nowerTime: 0,
              absTop: 0,
              oldv: 0,
     
            }
          },
          mounted(){
            this.getData();
            // 页面加载完成后添加滚动监听,并设置滚动条在顶部
            const dom = document.documentElement || document.body
            dom.scrollTop = 0
            window.addEventListener('scroll', this.handleScroll,true)
          },
          watch:{
            
          },
          updated() {
            // 消除数据加载完成之后,滚动条自动滚动到页面底部的问题
            // absTop 是上次滚动过的距离
            const dom = document.documentElement || document.body
            if (this.absTop > 0) {
              dom.scrollTop = this.absTop
            }
          },
          destroyed() {
            // 关闭当前页面时清除滚动监听
            window.removeEventListener('scroll', this.handleScroll,true)
          },
          beforeDestroy () {
    
          },
          methods: {
            handleScroll(){
              var bady = document.getElementById("iii"); // 在html中设置id为iii的div
              // console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
              bady.onscroll = () => {
                // 获取距离顶部的距离
                var scrollTop = bady.scrollTop;
                if (scrollTop !== 0 && this.oldv == 0) {
                  this.oldv = scrollTop;
                }
                // 获取可视区的高度
                var windowHeight = bady.clientHeight;
                // 获取滚动条的总高度
                var scrollHeight = bady.scrollHeight;
                //判断滚动条到达底部
                if (scrollTop + windowHeight >= scrollHeight && this.loading) {
                  this.loading = false;
                  this.getData();
                }
                //判断滚动条到达头部
                // if (scrollTop == 0 && this.oldv !== 0) {
                // }
              };
            },
     getData(){
              this.hide = true;
              this.page = this.page + 1;
              let params = {};
              params.id = sessionStorage.getItem('id');
              params.host = sessionStorage.getItem('host');
              params.startTime = parseInt(sessionStorage.getItem('startTime'));
              params.endTime = parseInt(sessionStorage.getItem('endTime'));
              params.index = this.moreIndex
              params.tableName = this.tableName
              params.nowerTime = this.nowerTime
              this.$api.getMonitorApi.POST_MAIN_HOST_SEARCH_TIME(params).then(res => {
                  if (res.code === 0) {
                      this.hide = false;
                      this.trueData = res.data.list;
                      this.moreIndex = res.data.index;
                      this.tableName = res.data.tableName;
                      this.nowerTime = res.data.nowerTime;
                      this.trueData.map(item => {
                        item.startTime = item.startTime == 0 ? '' : this.$util.timestamp.timestampMSFormat('YYYY-mm-dd HH:MM:SS', parseInt(item.startTime))
                        item.endTime = item.endTime == 0 ? '' :  this.$util.timestamp.timestampMSFormat(' HH:MM:SS', parseInt(item.endTime))
                        this.lineData.push(item);
                      })
                      this.loading = true;
                  } else {
                      this.hide = false;
                      this.$message.error(res.msg);
                  }
              }).catch(() => {
                  this.hide = false
              })
            }
          },
        }
    </script>
    <style lang="less">
    .time{
      height: 100%;
      overflow: auto;
    
      .detailTime-style {
        position: absolute;
        left:1.5rem;
        top: 0.2rem;
        height: 300px;
    
        .el-timeline .fir .el-timeline-item__node{
          background-color:white; 
          border: 1px #E4E7F0 solid;
        }
    
        .el-timeline .las .el-timeline-item__node{
          background-color:white; 
          border: 1px #E4E7F0 solid;
        }
    
        .companydel {
          color: #6F6F6F;
          position: absolute;
          width: 1.3rem;
          top:0.01rem;
          font-size: 0.08rem;
          left: -1.3rem;
    
        }
    
        .contentdel{
          position: relative;
          // width: 3.9rem;  
          // width: 4rem;  
          padding: 10px;
          top: -10px;
          border: 1px solid #E4E7F0; 
          border-radius: 8px;
          font-size: 0.08rem;
          color: #6F6F6F;
    
          .statusfalse{
            background-color: #3d87f2;
            text-align: center;
            color: #fff;
            border-radius: 6px;
            padding: 2px 5px;
           
          }
    
          .statustrue {
            background-color: #dc4e47;
            text-align: center;
            color: #fff;
            border-radius: 6px;
            padding: 2px 5px;
          }
    
        }
    
        
        .contentdel::before{
          position: absolute; 
          top: 34px; 
          left: -10px; 
          top: 15px;
          border-top: 6px solid transparent; 
          border-bottom: 6px solid transparent; 
          border-right: 10px solid #E4E7F0;
          content: '';  
        }
    
        .contentdel::after{
          position: absolute; 
          top: 34px; 
          left: -8px; 
          top: 15px;
          border-top: 6px solid transparent; 
          border-bottom: 6px solid transparent; 
          border-right: 10px solid #fff;
          content: '';  
        }
    
    
        .fr {
            float: right;
        }
      }
    
      
      .loadmore-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f8f8f8;
        padding: 0.2rem 0;
      }
    
      .load-style {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(#000, .3);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    
      .nodata-con {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    
    }
      
     
    
    </style>
    
    
    展开全文
  • vue基于el-timeline组件实现动态表格时间线

    前言

    element中表格和时间线组件相信不少同学都用过吧,现在有这么一个需求,利用时间线组件实现不同时间线下的表格数据展示,同时表格表头及表格内的数据也是动态渲染的,效果如下图。


    实现效果:

    在这里插入图片描述


    实现思路:

    其实实现这个小功能非常简单,首先,我们要在 el-timeline-item 标签循环最外层的 dataList 数组,数组的 length 等于几,我们就会有几段时间线;表格中我们需要操作的是将固有的表格数据格式(一个数组)稍加修改,变成两个数组,将 el-tabledata 属性动态绑定上 dictList 数组(表格数据),再在 el-table-column 标签中循环 dictList 数组(表头数据),最后通过 proplabel 属性动态绑定匹配对应的值即可。


    源码如下:

    <template>
      <div>
        <el-dialog title="历史信息" :visible.sync="centerDialogVisible" width="50%">
          <el-timeline>
            <el-timeline-item placement="top" :timestamp="item.sj" v-for="(item, index) in dataList" :key="index">
              <el-card>
                <el-table :data="item.rows" border>
                  <el-table-column v-for="(item, index) in item.dictList" :prop="item.indexCode" :label="item.label" :key="index" align="center"></el-table-column>
                </el-table>
              </el-card>
            </el-timeline-item>
          </el-timeline>
    
        </el-dialog>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          // 模拟数据
          dataList: [
            {
              sj: "2022-09-01",
              dictList: [
                {
                  indexCode: "name",
                  label: "姓名",
                },
                {
                  indexCode: "sex",
                  label: "性别",
                },
                {
                  indexCode: "age",
                  label: "年龄",
                },
              ],
              rows: [
                {
                  name: "小明",
                  sex: "女",
                  age: "18",
                },
              ],
            },
            {
              sj: "2022-08-01",
              dictList: [
                {
                  indexCode: "firmName",
                  label: "企业名称",
                },
                {
                  indexCode: "site",
                  label: "企业地址",
                },
                {
                  indexCode: "date",
                  label: "注册日期",
                },
              ],
              rows: [
                {
                  firmName: "文化有限公司",
                  site: "北京",
                  date: "2018-01-25",
                },
              ],
            },
            {
              sj: "2022-07-01",
              dictList: [
                {
                  indexCode: "plate",
                  label: "车牌号",
                },
                {
                  indexCode: "fuel",
                  label: "燃料类型",
                },
                {
                  indexCode: "plateColor",
                  label: "车牌颜色",
                },
              ],
              rows: [
                {
                  plate: "京R11111",
                  fuel: "柴油",
                  plateColor: "蓝色",
                },
              ],
            },
          ],
          centerDialogVisible: true, //弹框显隐状态
        };
      },
    };
    </script>
    
    <style scoped>
    h3 {
      margin: 10px 0px;
    }
    </style>
    

    拓展

    有关于动态表格与其他组件结合使用的操作,大家可移步博主另一篇文章(vue基于element实现动态表格)

    展开全文
  • element-ui的滚动条组件el-scrollbar+el-timeline滚动到底部分页刷新 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 html: <div class="content_left"> <...

    html:

    <div class="content_left">
            <el-card shadow="always">
              <div class="radio">
                排序:
                <el-radio-group v-model="reverse">
                  <el-radio :label="true">倒序</el-radio>
                  <el-radio :label="false">正序</el-radio>
                </el-radio-group>
              </div>
              <el-timeline :reverse="reverse" v-loading="loading">
                <el-scrollbar style="height:100%;" id="scrollbar" ref="scrollbar">
                  <el-timeline-item
                    v-for="(activity, index) in activities"
                    :key="index"
                  >
                    <div>
                      {{activity.start_time|formatDate}}
                      <span class="item_xian"></span>
                      {{activity.end_time|formatDate}}
                    </div>
                    <div>
                      <div class="li_div">
                        <label for>名称:</label>
                        <span>{{activity.title}}</span>
                      </div>
                      <div class="li_div">
                        <label for>内容:</label>
                        <span>{{activity.field_id.field_name}}</span>
                        <el-tag>{{activity.field_id.type_name}}</el-tag>
                      </div>
                    </div>
                  </el-timeline-item>
                  <div
                    id="load"
                    style="height:1px;width: 80%;margin: 0 auto;"
                  ></div>
                  <div v-if="state" style="text-align:center;height: 28px;">没有更多了</div>
                </el-scrollbar>
              </el-timeline>
            </el-card>
          </div>
    

    js:
    正序倒序部分

    data() {
        return {
          loading: true,
          reverse: true,
          state: false,
          flag: false,
          activities: [],
        };
      },
      watch: {//监听reverse变量
        reverse: function(val) {
          // console.log(val);
          if (val) {
            this.activities = this.activities.sort(function(a, b) {
              return b.start_time < a.start_time ? 1 : -1;
            });
          } else {
            this.activities = this.activities.sort(function(a, b) {
              // return b.start_time - a.start_time;
              return b.start_time > a.start_time ? 1 : -1;
            });
          }
          // console.log(list);
        }
      },
    

    滚动部分

    mounted() {
      //监听事件
      this.flag = true;
      document
        .getElementById("scrollbar")
        .addEventListener("scroll", this.listenScrollbar, true);
    },
    
    methods: {
      listenScrollbar() {
        if (this.flag) {
          //scrollbar  在App.vue页面  滚动条    这个一定要找到
          // console.log(document.getElementById("scrollbar").firstChild.scrollTop);
          let let1 = document.getElementById("scrollbar").firstChild.scrollTop; //滚动条滚动距离
          let let2 = document.getElementById("scrollbar").firstChild.scrollHeight; //浏览器总高度
          let let3 = document.getElementById("scrollbar").scrollHeight; //浏览器可见高度
          if (let2 - let3 - let1 <= 0.05) {
            this.flag = false;
            // console.log("底部");
            let loadingInstance = this.$loading({
              target: "#load",
              text: "加载中"
            });
            ++this.metaparams.page;
            // console.log(this.metaparams.page);
            setTimeout(() => {
              this.getAgenda();
              loadingInstance.close();
            }, 2000);
          }
        }
      },
      getAgenda() {
        let _this = this;
        //调用后端接口
        _List(this.metaparams).then(response => {
          if (response.data.length !== 0) {
            // _this.activities = response.data;
            let list = response.data.sort(function(a, b) {
              return b.start_time < a.start_time ? 1 : -1;
            });
            for (let i in list) {
              _this.activities.push(list[i]);
            }
            //*判断在这
            _this.reverse = true;
            _this.state = false;
            _this.loading = false;
            _this.flag = true;
            // console.log(_this.activities);
          } else {
            //*判断在这
            _this.state = true;
            _this.flag = false;
          }
        });
      }
    

    本文下拉逻辑参考下面这篇博客
    !https://blog.csdn.net/clumsyCoding/article/details/89383976
    欢迎大家留言交流
    大家2020新年快乐!

    展开全文
  • 自定义 el-timeline 节点样式

    万次阅读 2019-10-31 16:40:37
    <div class="left-lineBox"> <el-timeline> <el-timeline-item v-for="(activity, index) in activities" :key="index" ...
  • el-timeline-item时间线颜色动态变化

    千次阅读 2021-11-03 13:44:18
    el-timeline-item :color='colors(runningSort,index)' v-for="(item,index) in List" :key="item.id"> //js colors(running,index){ if(running>index){ return '#0bbd87' } }, ...
  • vue-timeLine.vue

    2020-08-18 18:06:21
    利用vue-element的步骤组件el-steps实现横向时间轴,实现点击时间轴的时间节点动态的加载订单数据列表进行展示
  • 直接在element的时间轴组件el-timeline-item上挂在点击事件是不生效的,只有点击在连接线的位置才能触发,这是因为在点击过程中,可能点击到的是el-timeline-item的子元素,比如el-timeline-item__...el-timeline-item
  • timeline-ui-master.zip,timeline-ui-master,public,index.html,robots.txt,src,index.tsx,react-app-env.d.ts,card,TimelineCard.tsx,TimelineCard.css,setupTests.ts,reportWebVitals.ts,tsconfig.json,LICENSE,...
  • timeline.zip

    2021-02-12 20:32:55
    使用时间线的时候由于版本问题,不能使用,需要用到timeline文件
  • 记录: ... <template> <div class="stage">... // 双重tabs循环 ...el-tabs style="margin-top: 12px" @tab-click="handleClick" :value=...el-tab-pane v-for="item in tabArr" :key="item.key" :label="item
  • timeline.zip,jquery.1.4.3.js,timeline-bg.png,timeline-arr.png,timeline.html
  • 目录:Unity - Timeline 知识汇总 原味:https://docs.unity3d.com/Packages/com.unity.timeline@1.2/manual/wf_nested.html 翻译时Timeline版本:Timeline 1.2.11 Nesting Timeline instances 嵌套的Timeline实例 ...
  • vue 横向 简单实用版本 时间轴------ Timeline 由于之前弄了一个带左右按钮时间轴,里面问题太多, 改版 <template> <div class="hello"> <ul :style="actived"> <!-- <ul :...
  • 输入框为el-input-number 列表为el-table 可编辑表格(插槽实现) 由于我的逻辑较多,整体代码在400行左右,所以这里只简化说明,大神请绕过,轻吐槽(个人学习vue才一个多月,很多组件的用法或者语法,都还不是很...
  • el-row中插入东西时,必须使用el-col进行包裹才可以。
  • element下表格(el-table)中嵌套选择器(el-select) 前端 <el-table-column label="类型"> <template slot-scope="scope"> <el-select v-model="scope.row.musicType" multiple ...
  • 一起来学习Vue把,这篇博客是关于Timeline组件使用,由于element-ui与vue-cli-plugin-element更新冲突问题,导致我们不能直接通过导入的方式使用该组件,于是我们采用手动导入的方式来解决这个问题 2、导入与配置 将...
  • 轻量的vue时间轴组件installnpm install vue-light-timeline如果你使用的是yarnyarn add vue-light-timelineusageimport LightTimeline from 'vue-light-timeline';(LightTimeline); <template> <light-...
  • 时间轴中添加卡片后左边的卡片怎么贴轴显示 <a-timeline mode='alternate'> <a-timeline-item> <a-icon slot='dot' type='border' style='font-size: 30px;' /> <a-card style='width: 300px; border-color: #448ef7...
  • el-time传递数据给后台

    2022-01-28 11:02:21
    时间格式: <el-time-picker is-range v-model="form.timePoint" format = 'HH:mm' value-format = 'HH:mm:ss' range-separator="至" placeholder="选择时间范围
  • 业务场景:实现合并日期列相同的日期 思路:使用element的:span-method=...el-table :data="meetTotalTableList" :span-method="objectSpanMethod" border size="mini" :header-cell-style="{background:'#fffff
  • vue3+element-plus的el-icon 组件使用

    千次阅读 2022-03-23 16:34:33
    使用 element-plus 时发现了一个问题:icon 需要单独安装和引入,所以尝试了一下发现可行,记录一下
  • 在调用element-ui中的timeline时间线组件时,出现了节点显示不完全的问题,如下图: @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer)....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,697
精华内容 678
关键字:

el-timeline

友情链接: example4.rar