需求:实现一个全选、单选功能
效果图:
代码:
<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的样式,否则竖线会对不齐