需求分析
HTML部分
<div class="time-line">
<el-timeline>
<el-timeline-item
v-for="(item, index) in sportsPerformanceList"
:key="index"
:timestamp="item.date"
placement="top"
>
<div
slot="dot"
class="df ai icon"
@click="itemClick(index)"
>
<div class="left"></div>
<div class="right">
<i
v-if="tlIndex === index"
class="el-icon-arrow-down"
></i>
<i v-else class="el-icon-arrow-up"></i>
</div>
</div>
<div v-show="tlIndex === index">
<div
class="tl-type"
v-for="(listItem, i) in item.list"
:key="i"
>
<el-tag :type="statusClass[listItem.eventType]">
{{
listItem.eventType
| valueToText(
DROPDOWNBOX.EVENT_TYPE,
'value',
'label'
)
}}
</el-tag>
<div
class="li-item"
v-for="(threeItem, j) in listItem.threeList"
:key="j"
>
<span
>{{ threeItem.date }}  
{{ threeItem.eventName }}  
{{ threeItem.eventResults }}</span
>
<el-button
type="text"
@click="editAchievement(threeItem)"
>编辑</el-button>
<el-button
type="text"
@click="deleteAchievement(threeItem)"
>删除</el-button>
</div>
</div>
</div>
</el-timeline-item>
</el-timeline>
</div>
css
.time-line {
margin-top: 10px;
max-height: 240px;
overflow-y: auto;
padding-left: 2px;
/deep/.el-timeline {
position: relative;
left: -40px;
.el-timeline-item__timestamp {
color: #333333;
font-weight: bold;
padding-top: 2px !important;
}
}
.tl-type {
width: 90%;
margin: 10px 0 15px;
}
.li-item {
// width: 755px;
line-height: 20px;
font-size: 14px;
color: #666666;
span {
padding-right: 30px;
}
el-button {
line-height: 20px !important;
}
}
.icon {
position: relative;
top: -4px;
left: -1px;
cursor: pointer;
z-index: 9;
}
.left {
width: 12px;
height: 12px;
border-radius: 50%;
background: #e4e7ed;
margin-right: 60px;
}
}
JS
其中sportsPerformanceList是用来存储格式化过的数据,是一个三层的嵌套数组,sportsPerformance是只有一层的数组,用于提交数据。
- 当新增时,就往sportsPerformance中push一条数据,并进行数据格式化(调用formatDateData(sportsPerformance)),存储至sportsPerformanceList。
- 当点击编辑时需要找出sportsPerformance中与当前点击事件相同的数据,获取索引,并进行表单回填操作,然后进行编辑,保存时对sportsPerformance进行修改,之后进行格式化。
- 当删除时与编辑相同,找到索引,对sportsPerformance进行删除操作,之后进行格式化。
格式化代码如下:
// 格式化时间数据
formatDateData(data) {
let newArr = [] // 按年份排序数组
let lastArr = [] // 最终要输出的结果
data.forEach(item => {
let index = -1
let isExists = newArr.some((newItem, j) => {
if (new Date(item.date).getFullYear() === newItem.date) {
index = j
return true
}
})
if (!isExists) {
newArr.push({
date: new Date(item.date).getFullYear(),
subList: [item]
})
} else {
newArr[index].subList.push(item)
}
})
newArr.forEach(a => {
const list = this.formatEventTypeData(a).map(item => {
// 比赛类型内的时间排序
const threeList = item.threeList.sort((p, n) => {
return +new Date(n.date) - +new Date(p.date)
})
return { ...item, threeList }
})
lastArr.push({
list,
date: a.date + ''
})
})
this.sportsPerformanceList = lastArr
},
// 格式化赛事类型
formatEventTypeData(data) {
let newEventArr = []
data.subList.forEach(item => {
let index = -1
let isExists = newEventArr.some((newItem, j) => {
if (item.eventType === newItem.eventType) {
index = j
return true
}
})
if (!isExists) {
newEventArr.push({
eventType: item.eventType,
threeList: [item]
})
} else {
newEventArr[index].threeList.push(item)
}
})
newEventArr = newEventArr.sort(function (p, n) {
return +p.eventType - +n.eventType
})
return newEventArr
}
新增
this.sportsPerformance.push(data)
this.formatDateData(this.sportsPerformance)
编辑
this.sportsPerformance.splice(index, 1, data)
this.formatDateData(this.sportsPerformance)
删除
this.sportsPerformance.splice(index, 1)
this.formatDateData(this.sportsPerformance)