使用Vue+Element UI實(shí)現(xiàn)復(fù)選框刪除線效果
更新時(shí)間：2026年01月08日 09:01:27 作者：裴嘉靖
在開發(fā)報(bào)告生成、配置選擇等功能時(shí),我們經(jīng)常需要讓用戶選擇包含哪些內(nèi)容,一個(gè)好的UI設(shè)計(jì)應(yīng)該讓用戶清晰地看到哪些選項(xiàng)被選中,哪些被排除,本文將介紹如何使用Vue + Element UI實(shí)現(xiàn)一個(gè)優(yōu)雅的復(fù)選框刪除線效果,需要的朋友可以參考下
前言
在開發(fā)報(bào)告生成、配置選擇等功能時(shí)，我們經(jīng)常需要讓用戶選擇包含哪些內(nèi)容。一個(gè)好的UI設(shè)計(jì)應(yīng)該讓用戶清晰地看到哪些選項(xiàng)被選中，哪些被排除。本文將介紹如何使用Vue + Element UI實(shí)現(xiàn)一個(gè)優(yōu)雅的復(fù)選框刪除線效果。
效果圖
效果展示
選中狀態(tài)：文字正常顯示，表示該項(xiàng)會(huì)包含在報(bào)告中
未選中狀態(tài)：文字顯示刪除線并半透明，表示該項(xiàng)被排除
這種設(shè)計(jì)在醫(yī)療報(bào)告、數(shù)據(jù)分析報(bào)告等場(chǎng)景中非常實(shí)用，能讓用戶一目了然地看到最終會(huì)包含哪些內(nèi)容。
一、基礎(chǔ)實(shí)現(xiàn)
1. HTML結(jié)構(gòu)
<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. 數(shù)據(jù)結(jié)構(gòu)
export default {
data() {
return {
// 選中的模板ID數(shù)組
selectedTemplateIds: [1, 2, 3],
// 報(bào)告數(shù)據(jù)
reportData: {
template: [
{
id: 1,
templateContent: '血壓均值：\n全天:收縮壓均值為...'
},
{
id: 2,
templateContent: '夜間血壓下降率 9.52 約型...'
},
{
id: 3,
templateContent: '平均壓均值 全天：94.8...'
}
// ... 更多模板
]
}
}
}
}
3. 核心樣式實(shí)現(xiàn)
.template-selection {
.el-checkbox-group {
display: flex;
flex-direction: column;
gap: 15px; // 每個(gè)選項(xiàng)之間的間距
}
.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; // 平滑過(guò)渡效果
}
// 關(guān)鍵代碼：未選中時(shí)顯示刪除線
&:not(.is-checked) .template-item-content {
text-decoration: line-through; // 刪除線
opacity: 0.6; // 半透明
}
}
}
二、實(shí)現(xiàn)原理詳解
1. Element UI的類名機(jī)制
Element UI的復(fù)選框組件有一個(gè)內(nèi)置的類名機(jī)制：
- 選中時(shí)：
.el-checkbox元素會(huì)自動(dòng)添加.is-checked類 - 未選中時(shí)：
.el-checkbox元素沒(méi)有.is-checked類
2. CSS選擇器解析
&:not(.is-checked) .template-item-content {
text-decoration: line-through;
opacity: 0.6;
}
選擇器拆解：
&- 代表父選擇器.el-checkbox:not(.is-checked)- CSS偽類，表示"沒(méi)有.is-checked類".template-item-content- 內(nèi)容區(qū)域
翻譯成人話：
“當(dāng)復(fù)選框沒(méi)有被選中時(shí)（沒(méi)有.is-checked類），給內(nèi)容區(qū)域添加刪除線和半透明效果”
3. 樣式屬性說(shuō)明
| 屬性 | 值 | 作用 |
|---|---|---|
| text-decoration | line-through | 添加刪除線（橫線穿過(guò)文字） |
| opacity | 0.6 | 透明度60%，顯得灰暗 |
| transition | all 0.3s ease | 狀態(tài)切換時(shí)的平滑過(guò)渡動(dòng)畫 |
三、完整示例代碼
<template>
<div class="report-template-section">
<div class="section-title">
?? 報(bào)告模板
</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">生成報(bào)告</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedTemplateIds: [1, 2, 3],
templates: [
{
id: 1,
content: '血壓均值：\n全天:收縮壓均值為均值128.9/78.8mmHg(包含全部數(shù)據(jù))...'
},
{
id: 2,
content: '夜間血壓下降率 9.52 約型 非約型 (參考范圍: 反勺型< 0%; 非約型≥0且≤10%; 約型: > 10%且≤20%; 超約型 > 20%)'
},
{
id: 3,
content: '平均壓均值 全天：94.8|白天：97.5|夜間：88.0'
},
{
id: 4,
content: '血壓負(fù)荷：全天 收縮壓：45.40%, 舒張壓：17.79% 白天 收縮壓：57.39%, 舒張壓：20.00%'
},
{
id: 5,
content: '動(dòng)脈硬化指數(shù) 0.35(參考范圍<0.55)'
},
{
id: 6,
content: '最大值和最小值：\n收縮壓最大值162, 出現(xiàn)時(shí)間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('報(bào)告生成中...')
}
}
}
</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;
}
// 核心樣式：未選中時(shí)顯示刪除線
&:not(.is-checked) .template-item-content {
text-decoration: line-through;
opacity: 0.6;
}
}
}
.action-buttons {
display: flex;
gap: 10px;
justify-content: flex-end;
}
}
</style>
四、進(jìn)階優(yōu)化
1. 添加懸停效果
.el-checkbox {
.template-item-content {
transition: all 0.3s ease;
}
// 未選中時(shí)的懸停效果
&:not(.is-checked):hover .template-item-content {
opacity: 0.8; // 懸停時(shí)稍微提高透明度
color: #409eff; // 改變顏色提示可點(diǎn)擊
}
}
2. 添加選中動(dòng)畫
.el-checkbox {
.template-item-content {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: left center;
}
// 選中時(shí)的縮放動(dòng)畫
&.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. 響應(yīng)式適配
// 移動(dòng)端適配
@media screen and (max-width: 768px) {
.template-selection {
.el-checkbox {
.template-item-content {
font-size: 12px;
line-height: 1.6;
}
}
}
}
五、實(shí)際應(yīng)用場(chǎng)景
1. 醫(yī)療報(bào)告生成
// 醫(yī)療報(bào)告模板選擇
templates: [
{ id: 1, content: '血壓均值分析' },
{ id: 2, content: '血壓變異性分析' },
{ id: 3, content: '血壓負(fù)荷分析' },
{ id: 4, content: '動(dòng)脈硬化風(fēng)險(xiǎn)評(píng)估' },
{ id: 5, content: '用藥建議' }
]
2. 數(shù)據(jù)導(dǎo)出配置
// 導(dǎo)出字段選擇
exportFields: [
{ id: 1, content: '基本信息' },
{ id: 2, content: '測(cè)量數(shù)據(jù)' },
{ id: 3, content: '統(tǒng)計(jì)分析' },
{ id: 4, content: '圖表' }
]
3. 權(quán)限配置
// 權(quán)限選擇
permissions: [
{ id: 1, content: '查看報(bào)告' },
{ id: 2, content: '編輯報(bào)告' },
{ id: 3, content: '刪除報(bào)告' },
{ id: 4, content: '導(dǎo)出報(bào)告' }
]
六、常見問(wèn)題
1. 問(wèn)題：刪除線不顯示
原因：Element UI版本不同，類名可能不是.is-checked
解決：檢查實(shí)際的類名
// 在瀏覽器開發(fā)者工具中查看選中時(shí)的類名 // 可能是 .is-checked 或 .el-checkbox--checked
2. 問(wèn)題：換行不生效
原因：沒(méi)有設(shè)置white-space: pre-wrap
解決：
.template-item-content {
white-space: pre-wrap; // 保留換行符和空格
}
3. 問(wèn)題：過(guò)渡動(dòng)畫不流暢
解決：使用更好的緩動(dòng)函數(shù)
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
七、總結(jié)
通過(guò):not()偽類選擇器和Element UI的內(nèi)置類名機(jī)制，我們可以輕松實(shí)現(xiàn)復(fù)選框的刪除線效果：
核心要點(diǎn)：
- 使用
:not(.is-checked)選擇未選中的復(fù)選框 - 應(yīng)用
text-decoration: line-through添加刪除線 - 使用
opacity降低透明度增強(qiáng)視覺(jué)效果 - 添加
transition實(shí)現(xiàn)平滑過(guò)渡
這種設(shè)計(jì)模式不僅美觀，而且能顯著提升用戶體驗(yàn)，讓用戶清楚地知道哪些選項(xiàng)被包含或排除。
以上就是使用Vue+Element UI實(shí)現(xiàn)復(fù)選框刪除線效果的詳細(xì)內(nèi)容，更多關(guān)于Vue Element UI復(fù)選框刪除線的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
文章詳細(xì)分析了Vue項(xiàng)目中靜態(tài)資源路徑失效的問(wèn)題,包括開發(fā)、構(gòu)建、部署等階段的常見原因,并提供了多種解決方案,旨在幫助開發(fā)者系統(tǒng)性地解決靜態(tài)資源路徑問(wèn)題,構(gòu)建穩(wěn)定可靠的前端應(yīng)用,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了vue日歷/日程提醒/html5本地緩存功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
Vue?import?from省略后綴/加載文件夾的方法/實(shí)例詳解
本文介紹Vue在import時(shí)省略后綴以及import文件夾的方法，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了三種使用icon的方案，分別是element-icon、svg-icon、@iconify/vue，三種方案通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
vue-router的HTML5 History 模式設(shè)置
這篇文章主要介紹了vue-router的HTML5 History模式設(shè)置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
很多時(shí)候?yàn)榱俗屘岣哂脩舻捏w驗(yàn)感,在頁(yè)面上添加緩存,是十分有必要的,?下面這篇文章主要給大家介紹了關(guān)于vue3.0列表頁(yè)面做緩存的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
解決vue-cli項(xiàng)目開發(fā)運(yùn)行時(shí)內(nèi)存暴漲卡死電腦問(wèn)題
最近開發(fā)一個(gè)vue項(xiàng)目時(shí)遇到電腦卡死問(wèn)題，突然間系統(tǒng)就非?？?，然后卡著卡著就死機(jī)了，鼠標(biāo)也動(dòng)不了了，只能冷啟動(dòng)。這篇文章主要介紹了vue-cli項(xiàng)目開發(fā)運(yùn)行時(shí)內(nèi)存暴漲卡死電腦問(wèn)題,需要的朋友可以參考下2019-10-10
vue中使用elementui實(shí)現(xiàn)樹組件tree右鍵增刪改功能
這篇文章主要介紹了vue中使用elementui實(shí)現(xiàn)對(duì)樹組件tree右鍵增刪改功能,右擊節(jié)點(diǎn)可進(jìn)行增刪改，對(duì)節(jié)點(diǎn)數(shù)據(jù)進(jìn)行模糊查詢功能，本文給大家分享了完整代碼，需要的朋友可以參考下2022-08-08
這篇文章主要為大家介紹了Vue的監(jiān)聽屬性，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
詳解vue2.0模擬后臺(tái)json數(shù)據(jù)
這篇文章主要介紹了vue2.0模擬后臺(tái)json數(shù)據(jù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05