带时间线的历史记录

<div style="border: 1px solid #CFDBFB;border-radius: 4px;width:100%;padding:10px;margin-top:10px;">
        <span v-if="pInfo.PlanList&&pInfo.PlanList.length == 0" style="font-size: 12px;color: #666;">暂无数据span>
        <el-timeline :reverse="reverse" >
          <el-timeline-item 
            v-for="(activity, index) in pInfo.PlanList" @mouseenter.native="enterFun(activity)" @mouseleave.native ="leaveFun(activity)"
            :key="index"
            >
            <div style="display: flex;justify-content: space-between">
              <div style="display: inline-block;height: 36px;line-height: 36px;">
                <span>药师：{{activity.Name}}span>  
                <span style="color:#999999;">{{activity.Date}}span>  
                <span style="color: #2B60F8;cursor: pointer;" @click="editPlanList(activity)" v-if="activity.isEditShow">
                  <i class="iconfont iconxiugai" style="color:#2B60F8;">i>编辑span>
              div>
              <div style="display: inline-block;" v-if='activity.isEdit'>
                <el-button
                  style="
                    width: 60px;
                    border: 1px solid #C0CBE9;
                    color: #666;
                    height: 28px;
                    border-radius: 4px;margin-bottom:5px;
                  "
                  @click="cancel(activity)" size="mini">取消el-button>
                <el-button
                  style="
                    width: 60px;
                    border: 1px solid #C0CBE9;
                    color: #fff;
                    height: 28px;
                    border-radius: 4px;margin-bottom:5px;
                    background: #2B60F8;
                  "
                @click="SavePlanList(activity)" size="mini">保存el-button>
              div>
            div>
            <div>
              <span v-if='!activity.isEdit' style="background: #F0F5FF;border-radius: 4px;display: inline-block;height: 36px;width: 100%;
                line-height: 36px;padding: 0 15px;">{{activity.Detail}}span>
              <el-input v-else v-model="activity.Detail" placeholder="请输入内容" @input="changeDetail(activity)"
              style="height: 36px;width: 100%;">el-input>
            div>
          el-timeline-item>
        el-timeline>
      div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

1，每条记录有编辑，保存，取消的按钮；编辑的按钮，是当这条记录鼠标进入的时候才显示，移出的时候隐藏；用到的是这两个，因为在vue里，用了修饰符.native，要不然不起作用
@mouseenter.native=“enterFun(activity)”
@mouseleave.native =“leaveFun(activity)”
2，初始的时候从数据里set两个值

this.pInfo.PlanList.forEach(element => {
 this.$set(element,'isEdit',false)
   this.$set(element,'isEditShow',false)
 });
1
2
3
4

3，鼠标移入，移出的时候

			// 鼠标移入
          enterFun(activity){
              console.log('鼠标移入',activity);
              activity.isEditShow=true
      
          },
          // 鼠标移出
          leaveFun(activity){
            console.log('鼠标移出',activity);
            activity.isEditShow=false
          },
1
2
3
4
5
6
7
8
9
10
11

4，编辑的时候

//编辑单条内容
          editPlanList(row){  
            row.isEdit = true;
            this.rowCopy = row
          },
1
2
3
4
5

5，取消的时候，input框改变的时候

		changeDetail(activity){
            console.log(111,activity)
            this.rowCopy = activity;
          },
          // 取消
          cancel(activity){
            activity.isEdit = false;
            activity.Detail = '';
          },
1
2
3
4
5
6
7
8
9