去除u-table使用Descriptions的边框

已于 2022-01-21 10:21:01 修改
阅读量1k 收藏
点赞数
分类专栏： Vue 文章标签： javascript css3 前端
于 2022-01-07 12:03:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44405420/article/details/122361514
版权

编辑一个样式

.xxx .el-descriptions-item{
  border: none !important;
}

在需要去除边框的table加一个div并引用该样式

    <div class="xxx">
      <u-table></u-table>
   </div>
沐某人
关注
专栏目录
star-wars-descriptions
03-06
Create React App入门该项目是通过引导的。可用脚本在项目目录中，可以运行：npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误...
vue table如何去掉默认边框样式
Stars_in_rain的博客
06-10 3836
要去掉所有的默认边框样式可以这样设置：
el-descriptions 自定义标签 修改边框样式 border
finallyideas的博客
08-02 2102
这是只加一个，图例上，若是单加在rowCenter,则修改另一部分，若是两边都加，就是上图例第二种情况。
《el-descriptions》 边框重叠问题
潜心
10-18 1100
问题有异曲同工之处，属于浏览器渲染问题，所以我排查到了一个属性padding,修改后问题得以解决。dom结构是很清晰的，并且是利用了表格特性，但是边框就是重叠了。能怀疑和调整的地方也只有el-定义的边距问题，边框线重叠呢也和。
去掉tabbar的边框线
kangli的专栏
11-21 4569
转载自：http://www.shangxueba.com/jingyan/2453883.html - (void)viewWillAppear:(BOOL)animated{//去掉UITabbar的边框线          [self.tabBarController.tabBar setBackgroundImage:[Utill createImageWithColor:[UI
如何去除table的边框_怎么把table的外面的边框去掉
weixin_36205997的博客
12-30 9684
展开全部它有三个参数(cols,rows,none)，当rules=cols时，表格会隐藏纵向的分隔线，这样我们就只能看到表格的行；当rules=rows时，则隐藏了横向62616964757a686964616fe4b893e5b19e31333337383832的分隔线，这样我们只能看到表格的列；而当rules=none时，纵向分隔线和横向分隔线将全部隐藏。二、表格边框的隐藏普表通格这是一普通...
055_Descriptions描述列表
aihiao的专栏
03-05 7300
1. Descriptions描述列表 1.1. 列表形式展示多个字段。 1.2. Descriptions Attributes 参数 说明 类型 可选值 默认值 border 是否带有边框 boolean 无 false column 一行Descript
IEEE 1016-2009 -- Software Design Descriptions
02-15
IEEE 1016-2009标准是信息技术领域内一个专门针对软件设计描述文档（Software Design Descriptions，简称SDDs）的文档标准。该标准详细阐述了软件设计描述应当包含的信息内容和组织结构，并规定了用于一致性SDD的...
60000-documented-ufo-sightings-with-text-descriptions-and-metada
03-29
最近在学Hadoop,其中需要用到一些数据集。这个UFO数据集是《Hadoop Beginner's Guide》书上使用的例子，但是按书上提示以及下载不到这个数据集。搜了好久才弄到，现在分享出来
unsupervised-topic-modelling-of-unlabeled-text-descriptions
03-27
未标记文本描述的无监督主题建模
q2a-tag-descriptions:为标签页中的标签和描述添加标题和图标。 这个插件对于 Q2A 的 SEO 必不可少
06-23
向标签添加标题（它将在标签的标题属性中使用title字段而不是description字段） 将图标添加到标签（图标图像将显示在标签链接内，其大小可以在管理选项页面中设置） 它支持标签描述中的 HTML（可以在插件选项页面...
使用u-table/ux-grid虚拟滚动解决el-table数据量大渲染卡的问题、及表格根据浏览器大小动态调整高度问题
金乌的博客
06-13 6009
u-table的使用方法和el-table没什么区别。这里必须加的两个属性，不加的话无法实现虚拟表格，页面一样会卡死，第一个，use-virtual 开启虚拟滚动，第二，个 height 必须限制高度，这两个不加就是普通表格，加了之后就是虚拟表格。若想根据浏览器大小动态设置表格高度，可以通过vuex将屏幕大小的数据存储起来，通过监听屏幕大小，动态设置表格高度。新建umy-ui.scss文件，并引入。表格高度根据浏览器屏幕高度变化。
关于u-table宽度问题
qq_44774622的博客
12-06 1206
修改u-tabel中的表格宽度
element ui el-table表格复选框，弹框关闭取消打勾选择
最新发布
蓝胖子的博客
10-13 1469
element ui el-table表格复选框，弹框关闭取消打勾选择
Table嵌套去掉子table的外边框
diyu8056的博客
12-17 650
Table表格去掉子表格的边框 1. 父表格<tablealign="center"style="border:none;cell-padding:0;cell-spacing:0;border-collapse:collapse;"> 2.子表格 <tableborder="1"bordercolor="#000000"cellpadding="...
el-descriptions
高晨辉的博客
08-09 2万+
<el-descriptions title="用户信息"> <el-descriptions-item label="用户名">kooriookami</el-descriptions-item> <el-descriptions-item label="手机号">18100000000</el-descriptions-item> <el-descriptions-item label="居住地"&gt...
vue3解决el-descriptions的label被挤压换行以及内容过长时换行问题
JJ_Smilewang的博客
05-25 8660
在实际开发中，经常会使用Descriptions描述列表来展示内容，而有时某个字段内容太多，就会导致如下图的问题，因此本文就主要介绍如何解决该问题。而解决内容过多换行问题的主要点就是：给内容列添加。给内容列一个最大宽度；
vue中使用el-table调整行间距
Missxu1895的博客
07-15 1万+
el-table设置行间距
vue+element:el-descriptions组件，数据绑定、内容样式和标签样式自定义
热门推荐
baidu_39557593的博客
04-08 5万+
1.绑定接口数据——默认样式展示（未自定义宽度）： 2.绑定接口数据——自定义样式展示： 3.使用的语法 labelStyle="width: 150px" contentStyle="width: 250px" 4.Vue代码展示： <el-descriptions class="margin-top" :column="3" style="width: 1250px" border> <el-descriptions-item labelStyle="w
el-descriptions与el-table 使用
05-14
el-descriptions 是 Element UI 中的一个组件，用于展示数据的详细描述信息。一般情况下，它与其他 Element UI 的组件（如 el-table）一起使用。 el-descriptions 可以通过 props 来配置展示的数据，如 label-width、border、column、size 等。我们可以在 el-table 中使用 el-descriptions 来展示每一行数据的详细信息。具体实现方式如下： 1. 在 el-table 中的每一行数据中添加一个 el-descriptions 组件 ``` <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button @click="handleView(scope.row)">查看详情</el-button> </template> </el-table-column> <el-table-column label="详细信息"> <template slot-scope="scope"> <el-descriptions :column="1" :border="false"> <el-descriptions-item label="姓名">{{ scope.row.name }}</el-descriptions-item> <el-descriptions-item label="地址">{{ scope.row.address }}</el-descriptions-item> <el-descriptions-item label="电话">{{ scope.row.tel }}</el-descriptions-item> <el-descriptions-item label="性别">{{ scope.row.gender }}</el-descriptions-item> </el-descriptions> </template> </el-table-column> </el-table> </template> ``` 2. 在 el-table 中添加一个查看详情的方法 handleView，用于展示当前行的详细信息 ``` methods: { handleView(row) { this.dialogVisible = true this.currentRow = row } } ``` 3. 在弹出框中使用 el-descriptions 组件展示当前行的详细信息 ``` <template> <el-dialog :visible.sync="dialogVisible"> <el-descriptions :column="1" :border="false"> <el-descriptions-item label="姓名">{{ currentRow.name }}</el-descriptions-item> <el-descriptions-item label="地址">{{ currentRow.address }}</el-descriptions-item> <el-descriptions-item label="电话">{{ currentRow.tel }}</el-descriptions-item> <el-descriptions-item label="性别">{{ currentRow.gender }}</el-descriptions-item> </el-descriptions> </el-dialog> </template> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值