el-descriptions 自定义标签 修改边框样式 border

文章展示了如何仅修改HTML/CSS中的标签样式,提供了代码实例,并展示了不同情况下图例的调整。读者可通过点赞表示赞赏。
该文章已生成可运行项目,

先看效果图:

只修改标签的样式效果,未修改的是白灰色的

 

 全修改的效果

 不说废话,直接上代码实例            有用点个赞,谢谢~~~

 

这是只加一个,图例上,若是单加在rowCenter,则修改另一部分,若是两边都加,就是上图例第二种情况

 

本文章已经生成可运行项目
<template> <div class="detailResume_container"> <el-form :inline="true" :model="filterForm" class="demo-form-inline"> <!-- 业绩区分选择器 --> <el-form-item label="工号"> <el-input v-model="usernumber" placeholder="请输入工号"></el-input> </el-form-item> <!-- 审批状态选择器 --> <el-form-item label="姓名"> <el-input v-model="username" placeholder="请输入姓名"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="handleQuery">查询</el-button> <el-button type="primary" @click="resetFilter">重置</el-button> </el-form-item> </el-form> <div class="tables_custom"> <el-descriptions title="基本信息" class="descriptions_custom" :column="3" border> <el-descriptions-item class="custom-width-item"> <template #label> <div class="cell-item"> 工号 </div> </template> {{ basicInfo.usernumber }} </el-descriptions-item> <el-descriptions-item class="custom-width-item"> <template #label> <div class="cell-item"> 姓名 </div> </template> {{ basicInfo.usernumber }} </el-descriptions-item> <el-descriptions-item class="custom-width-item"> <template #label> <div class="cell-item"> Team别 </div> </template> {{ basicInfo.team }} </el-descriptions-item > <el-descriptions-item class="custom-width-item"> <template #label> <div class="cell-item"> Group别 </div> </template> {{ basicInfo.group }} </el-descriptions-item > <el-descriptions-item class="custom-width-item"> <template #label> <div class="cell-item"> Part别 </div> </template> {{ basicInfo.part }} </el-descriptions-item > <el-descriptions-item class="custom-width-item"> <template #label> <div class="cell-item"> 班次 </div> </template> {{ basicInfo.shift }} </el-descriptions-item > <el-descriptions-item class="custom-width-item"> <template #label> <div class="cell-item"> Grade </div> </template> {{ basicInfo.grade }} </el-descriptions-item > <el-descriptions-item class="custom-width-item"> <template #label> <div class="cell-item"> 当前等级 </div> </template> {{ basicInfo.certify }} </el-descriptions-item > <el-descriptions-item class="custom-width-item"> <template #label> <div class="cell-item"> 目标等级 </div> </template> {{ basicInfo.targetcertify }} </el-descriptions-item> </el-descriptions> </div> </div> </template> <script setup> import { Odometer, EditPen, MagicStick } from "@element-plus/icons-vue"; import { watch, ref, onMounted, computed } from "vue"; import { ElMessage, ElMessageBox } from "element-plus"; import { getMyEqpPowerScore, getCurrentUser, getMyCurrentCertify, getMyHistoryEqpPowerScore, getCertifiedCourses, getZigeYangchengYeji, getRuleDefineSB, } from "@/api/myspace"; import { useRouter } from "vue-router"; const basicInfo=ref({ usernumber:"", username:"", team:"", group:"", part:"", shift:"", grade:"", certify:"", targetcertify:"" }) const filterForm=ref({ usernumber:"", username:"" }) </script> <style scoped> .detailResume_container { display: flex; flex-direction: column; height: 100%; width: 100%; } .demo-form-inline .el-input { --el-input-width: 220px; } .tables_custom{ width: 100%; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important; transition: box-shadow 0.3s ease-in-out; background: #fff; /* 确保背景不透明 */ padding: 1%; } .descriptions_custom{ width: 100%; } /* 自定义标签宽度 */ .tables_custom :deep(.custom-width-item .el-descriptions__label) { width: 100px !important; /* 设置标签宽度 */ min-width: 100px !important; /* 最小宽度保证不压缩 */ background-color: #0f63e09d; /* 可选背景色 */ font-weight: bold; text-align: right; /* 文本右对齐 */ } /* 自定义内容区域宽度 */ :deep(.custom-width-item .el-descriptions__content) { width: 250px; padding-left: 20px; } .cell-item { display: flex; align-items: center; } </style>现在自定样式就没生效,改什么都没用
最新发布
11-27
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值