使用Vue+Element UI实现复选框删除线效果

更新时间：2026年01月08日 09:01:27 作者：裴嘉靖

在开发报告生成、配置选择等功能时,我们经常需要让用户选择包含哪些内容,一个好的UI设计应该让用户清晰地看到哪些选项被选中,哪些被排除,本文将介绍如何使用Vue + Element UI实现一个优雅的复选框删除线效果,需要的朋友可以参考下

前言

在开发报告生成、配置选择等功能时，我们经常需要让用户选择包含哪些内容。一个好的UI设计应该让用户清晰地看到哪些选项被选中，哪些被排除。本文将介绍如何使用Vue + Element UI实现一个优雅的复选框删除线效果。

效果图

效果展示

选中状态：文字正常显示，表示该项会包含在报告中
未选中状态：文字显示删除线并半透明，表示该项被排除

这种设计在医疗报告、数据分析报告等场景中非常实用，能让用户一目了然地看到最终会包含哪些内容。

一、基础实现

1. HTML结构

<template>
    <div class="template-selection">
        <el-checkbox-group v-model="selectedTemplateIds">
            <el-checkbox 
                v-for="item in reportData.template" 
                :key="item.id" 
                :label="item.id"
            >
                <div class="template-item-content">
                    {{ item.templateContent }}
                </div>
            </el-checkbox>
        </el-checkbox-group>
    </div>
</template>

2. 数据结构

export default {
    data() {
        return {
            // 选中的模板ID数组
            selectedTemplateIds: [1, 2, 3],
            
            // 报告数据
            reportData: {
                template: [
                    {
                        id: 1,
                        templateContent: '血压均值：\n全天:收缩压均值为...'
                    },
                    {
                        id: 2,
                        templateContent: '夜间血压下降率 9.52 约型...'
                    },
                    {
                        id: 3,
                        templateContent: '平均压均值 全天：94.8...'
                    }
                    // ... 更多模板
                ]
            }
        }
    }
}

3. 核心样式实现

.template-selection {
    .el-checkbox-group {
        display: flex;
        flex-direction: column;
        gap: 15px;  // 每个选项之间的间距
    }

    .el-checkbox {
        display: flex;
        align-items: flex-start;
        margin-right: 0;

        .template-item-content {
            white-space: pre-wrap;  // 保留换行符
            line-height: 1.8;
            color: #606266;
            font-size: 14px;
            transition: all 0.3s ease;  // 平滑过渡效果
        }

        // 关键代码：未选中时显示删除线
        &:not(.is-checked) .template-item-content {
            text-decoration: line-through;  // 删除线
            opacity: 0.6;  // 半透明
        }
    }
}

二、实现原理详解

1. Element UI的类名机制

Element UI的复选框组件有一个内置的类名机制：

选中时：.el-checkbox 元素会自动添加 .is-checked 类
未选中时：.el-checkbox 元素没有 .is-checked 类

2. CSS选择器解析

&:not(.is-checked) .template-item-content {
    text-decoration: line-through;
    opacity: 0.6;
}

选择器拆解：

& - 代表父选择器 .el-checkbox
:not(.is-checked) - CSS伪类，表示"没有 .is-checked 类"
.template-item-content - 内容区域

翻译成人话：
“当复选框没有被选中时（没有.is-checked类），给内容区域添加删除线和半透明效果”

3. 样式属性说明

属性	值	作用
text-decoration	line-through	添加删除线（横线穿过文字）
opacity	0.6	透明度60%，显得灰暗
transition	all 0.3s ease	状态切换时的平滑过渡动画

三、完整示例代码

<template>
    <div class="report-template-section">
        <div class="section-title">
            📋 报告模板
        </div>
        
        <div class="template-selection">
            <el-checkbox-group v-model="selectedTemplateIds">
                <el-checkbox 
                    v-for="item in templates" 
                    :key="item.id" 
                    :label="item.id"
                >
                    <div class="template-item-content">
                        {{ item.content }}
                    </div>
                </el-checkbox>
            </el-checkbox-group>
        </div>
        
        <div class="action-buttons">
            <el-button @click="selectAll">全选</el-button>
            <el-button @click="clearAll">清空</el-button>
            <el-button type="primary" @click="generateReport">生成报告</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selectedTemplateIds: [1, 2, 3],
            templates: [
                {
                    id: 1,
                    content: '血压均值：\n全天:收缩压均值为均值128.9/78.8mmHg(包含全部数据)...'
                },
                {
                    id: 2,
                    content: '夜间血压下降率 9.52 约型    非约型 (参考范围: 反勺型< 0%; 非约型≥0且≤10%; 约型: > 10%且≤20%; 超约型 > 20%)'
                },
                {
                    id: 3,
                    content: '平均压均值 全天：94.8|白天：97.5|夜间：88.0'
                },
                {
                    id: 4,
                    content: '血压负荷：全天 收缩压：45.40%, 舒张压：17.79%    白天 收缩压：57.39%, 舒张压：20.00%'
                },
                {
                    id: 5,
                    content: '动脉硬化指数 0.35(参考范围<0.55)'
                },
                {
                    id: 6,
                    content: '最大值和最小值：\n收缩压最大值162, 出现时间2025-10-30 11:00:00, 最小值93...'
                },
                {
                    id: 7,
                    content: '盐敏感可能性：非约型, 平均脉率81.5bpm, 高可能性'
                }
            ]
        }
    },
    methods: {
        selectAll() {
            this.selectedTemplateIds = this.templates.map(t => t.id)
        },
        clearAll() {
            this.selectedTemplateIds = []
        },
        generateReport() {
            console.log('选中的模板ID:', this.selectedTemplateIds)
            this.$message.success('报告生成中...')
        }
    }
}
</script>

<style lang="scss" scoped>
.report-template-section {
    width: 100%;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 20px;

    .section-title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
        color: #303133;
        border-left: 4px solid #409eff;
        padding-left: 10px;
    }

    .template-selection {
        margin-bottom: 20px;

        .el-checkbox-group {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .el-checkbox {
            display: flex;
            align-items: flex-start;
            margin-right: 0;

            .template-item-content {
                white-space: pre-wrap;
                line-height: 1.8;
                color: #606266;
                font-size: 14px;
                transition: all 0.3s ease;
            }

            // 核心样式：未选中时显示删除线
            &:not(.is-checked) .template-item-content {
                text-decoration: line-through;
                opacity: 0.6;
            }
        }
    }

    .action-buttons {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
    }
}
</style>

四、进阶优化

1. 添加悬停效果

.el-checkbox {
    .template-item-content {
        transition: all 0.3s ease;
    }

    // 未选中时的悬停效果
    &:not(.is-checked):hover .template-item-content {
        opacity: 0.8;  // 悬停时稍微提高透明度
        color: #409eff;  // 改变颜色提示可点击
    }
}

2. 添加选中动画

.el-checkbox {
    .template-item-content {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: left center;
    }

    // 选中时的缩放动画
    &.is-checked .template-item-content {
        animation: checkIn 0.3s ease;
    }
}

@keyframes checkIn {
    0% {
        transform: scale(0.95);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

3. 响应式适配

// 移动端适配
@media screen and (max-width: 768px) {
    .template-selection {
        .el-checkbox {
            .template-item-content {
                font-size: 12px;
                line-height: 1.6;
            }
        }
    }
}

五、实际应用场景

1. 医疗报告生成

// 医疗报告模板选择
templates: [
    { id: 1, content: '血压均值分析' },
    { id: 2, content: '血压变异性分析' },
    { id: 3, content: '血压负荷分析' },
    { id: 4, content: '动脉硬化风险评估' },
    { id: 5, content: '用药建议' }
]

2. 数据导出配置

// 导出字段选择
exportFields: [
    { id: 1, content: '基本信息' },
    { id: 2, content: '测量数据' },
    { id: 3, content: '统计分析' },
    { id: 4, content: '图表' }
]

3. 权限配置

// 权限选择
permissions: [
    { id: 1, content: '查看报告' },
    { id: 2, content: '编辑报告' },
    { id: 3, content: '删除报告' },
    { id: 4, content: '导出报告' }
]

六、常见问题

1. 问题：删除线不显示

原因：Element UI版本不同，类名可能不是.is-checked

解决：检查实际的类名

// 在浏览器开发者工具中查看选中时的类名
// 可能是 .is-checked 或 .el-checkbox--checked

2. 问题：换行不生效

原因：没有设置white-space: pre-wrap

解决：

.template-item-content {
    white-space: pre-wrap;  // 保留换行符和空格
}

3. 问题：过渡动画不流畅

解决：使用更好的缓动函数

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

七、总结

通过:not()伪类选择器和Element UI的内置类名机制，我们可以轻松实现复选框的删除线效果：

核心要点：

使用:not(.is-checked)选择未选中的复选框
应用text-decoration: line-through添加删除线
使用opacity降低透明度增强视觉效果
添加transition实现平滑过渡

这种设计模式不仅美观，而且能显著提升用户体验，让用户清楚地知道哪些选项被包含或排除。

以上就是使用Vue+Element UI实现复选框删除线效果的详细内容，更多关于Vue Element UI复选框删除线的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

详解Vue3中对VDOM的改进
这篇文章主要介绍了详解Vue3中对VDOM的改进，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
vue3 + async-validator实现表单验证的示例代码
表单验证可以有效的过滤不合格的数据，减少服务器的开销，并提升用户的使用体验，今天我们使用 vue3 来做一个表单验证的例子，需要的朋友跟随小编一起学习下吧
2022-06-06
Vue Router中router.resolve方法使用实例
这篇文章主要给大家介绍了关于Vue Router中router.resolve方法使用的相关资料,router.resolve方法在前端路由库中用于解析路由信息,接受路径或路由对象,返回解析后的 URL、路由和位置对象,需要的朋友可以参考下
2024-11-11
Vue的Options用法说明
这篇文章主要介绍了Vue的Options用法说明，具有很好的参考价值，希望对大家有所
2020-08-08
详解Vue用cmd创建项目
在本篇内容里小编给大家整理了关于Vue用cmd创建项目的方法讲解，有兴趣的朋友们跟着学习下。
2019-02-02
使用Vue.js和MJML创建响应式电子邮件
这篇文章主要介绍了使用Vue.js和MJML创建响应式电子邮件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
vue-cli2,vue-cli3,vite 生产环境去掉console.log
console.log一般都是在开发环境下使用的,在生产环境下需要去除 ,本文主要介绍了vue-cli2,vue-cli3,vite 生产环境去掉console.log,具有一定的参考价值,感兴趣的可以了解一下
2024-05-05
vue在html标签{{}}中调用函数的方法总结及对比
这篇文章主要给大家介绍了关于vue在html标签{{}}中调用函数的方法总结及对比,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
2023-03-03
浅谈Vue 初始化性能优化
本篇文章主要介绍了浅谈Vue 初始化性能优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
Vue中图片上传组件封装-antd的a-upload二次封装的实例
这篇文章主要介绍了Vue中图片上传组件封装-antd的a-upload二次封装的实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09