Timeline 时间线自定义节点为Checkbox

需求：实现一个全选、单选功能

效果图：

代码：

<template>
  <div class="demo-box">
    <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选
    </el-checkbox>
    <el-timeline>
      <el-timeline-item timestamp="" placement="top" v-for="(item,index) in activities" :key="index">
        <template #dot>
          <el-checkbox v-model="item.checked" :checked="true" :value="item.id" @change="checkOne"/>
        </template>
        <div>
          <div class="time-tag">
            <div>
              <span>{
   
   { item.timestamp }}</span>
            </div>
          </div>
          <div class="reason-detail">
            {
   
   { item.content }}
          </div>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup>
import {ref, onMounted, computed} from 'vue';

const checkAll = computed(() => {
  if (activities.value.length > 0) {
    let boolArr = []
    for (let item of activities.value) {
      boolArr.push(item.checked)
    }
    return !boolArr.includes(false)
  } else {
    return false
  }
})
//选中的数据
const checkedList = ref([])
//模拟接口数据
const activities = ref([
  {
    content: 'Custom icon',
    timestamp: '2018-04-12 20:46',
    size: 'large',
    type: 'primary',
  },
  {
    content: 'Custom color',
    timestamp: '2018-04-03 20:46',
    color: '#0bbd87',
  },
  {
    content: 'Custom size',
    timestamp: '2018-04-03 20:46',
    size: 'large',
  },
  {
    content: 'Custom hollow',
    timestamp: '2018-04-03 20:46',
    type: 'primary',
    hollow: true,
  },
  {
    content: 'Default node',
    timestamp: '2018-04-03 20:46',
  },
])

const getData = () => {
  //实际上在这请求接口获取数据，获取到activities时进行下一步
  //。。。。。。。。。。。。。。

  //将获取到的数据每一项添加一个checked属性
  for (let item of activities.value) {
    item.checked = false
  }
}

//全选
const handleCheckAllChange = (val) => {
  for (let item of activities.value) {
    item.checked = val
  }
  if (val) {
    for (let item of activities.value) {
      checkedList.value.push(item)
    }
  } else {
    checkedList.value = []
  }

  console.log(checkedList.value)
}

//单选
const checkOne = () => {
  checkedList.value = []
  for (let item of activities.value) {
    if (item.checked) {
      checkedList.value.push(item)
    }
  }
  console.log(checkedList.value)
}

onMounted(() => {
  getData()
})

</script>

<style scoped lang="less">
::v-deep(.el-timeline-item__tail) {
  left: 6px;
  margin-top: 10px;
}

::v-deep(.el-timeline-item__timestamp.is-top) {
  margin-bottom: 3px;
}
</style>

注意事项：

1、全选checkbox绑定的值不能写死，要通过计算属性操作activities的checked属性来判断

2、要特别修改el-timeline的样式，否则竖线会对不齐