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