Element UI Table表格样式调整

最新推荐文章于 2023-12-25 17:30:23 发布
最新推荐文章于 2023-12-25 17:30:23 发布
阅读量645 收藏
点赞数 1
文章标签： ui vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41011920/article/details/129690782
版权

调整Element UI Table表格的样式

最终效果: 单元格合并,样式调整
在这里插入图片描述

模拟后端返回数据

{
              teamName: '小组一',
              outsourceFlag: '是',
              adminName: '张三',
              testValues: [
                {
                  code: '001',
                  value: '测试一'
                },
                {
                  code: '002',
                  value: '测试二'
                },
                {
                  code: '003',
                  value: '测试三'
                }
              ],
              taskTypes: [
                {
                  code: '001',
                  value: '任务一'
                },
                {
                  code: '002',
                  value: '任务二'
                },
                {
                  code: '003',
                  value: '任务三'
                },

              ],

              caseTypes: [
                {
                  code: '001',
                  value: '吃'
                },
                {
                  code: '002',
                  value: '喝'
                },
                {
                  code: '0023',
                  value: '玩'
                },

              ],
            },
              {
                teamName: '小二',
                outsourceFlag: '是',
                adminName: '李四',
                testValues: [
                  {
                    code: '001',
                    value: '测试一'
                  },

                ],
                taskTypes: [
                  {
                    code: '001',
                    value: '任务一'
                  },
                ],
                caseTypes: [
                  {
                    code: '001',
                    value: '玩'
                  },

                ],
              },
              {
                teamName: '小组一',
                outsourceFlag: '是',
                adminName: '张三',
                testValues: [
                  {
                    code: '001',
                    value: '测试一'
                  },
                  {
                    code: '002',
                    value: '测试二'
                  },
                  {
                    code: '003',
                    value: '测试三'
                  }
                ],
                taskTypes: [
                  {
                    code: '001',
                    value: '测试一'
                  },
                  {
                    code: '002',
                    value: '测试二'
                  },
                  {
                    code: '003',
                    value: '测试三'
                  }

                ],

                caseTypes: [
                  {
                    code: '001',
                    value: '测试一'
                  },
                  {
                    code: '002',
                    value: '测试二'
                  },
                  {
                    code: '003',
                    value: '测试三'
                  }

                ],
              },],

CSS代码

>>> .has-gutter tr>th:nth-child(2){
  padding-left: 10px !important;
}

>>> .el-table--enable-row-transition .el-table__body td:nth-child(2){
  padding-left: 10px !important;
}
>>> .has-gutter tr>th:nth-last-child(2){
  text-align:center;
}

>>> .el-table--enable-row-transition .el-table__body td:last-child{
  padding-left: 10px !important;
}

 >>> .el-table--enable-row-transition .el-table__body td{
   padding:0;
 }
 >>> .cell .el-tooltip{
   padding:0 !important;
 }
 >>> .el-table .cell{
   padding: 0 !important;
 }
 .annotation-rs:last-child{
   border:0;
 }

 .annotation-rs{
   margin-top: 5px;
   border-bottom: 1px solid #EBEEF5;
 }

全部代码实现

<template>
    <div class="app-container">
          <el-row>
            <el-col :span="24" class="warp-table" style="margin-top:10px">
              <el-table ref="multipleTable" :border="true" cellspacing="0" :data="tableData" stripe
                        style="width: 100%" id="deliveryTeamTable">
                <el-table-column type="index" label="序号" width="60" align="center" header-align='center'>
                </el-table-column>
                <el-table-column prop="teamName" label="小组名称" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="outsourceFlag" label="是否启用" align="center" width="100px" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="adminName" align="center" label="小组管理员" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="testValues" label="权限类型" align="center" width="100px"
                                 :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <div class="annotations">
                      <div class="annotation-rs"
                           v-for="(item,index) in scope.row.testValues" :key="index">
                        <span>{{item.value}}</span>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="taskType" label="任务类型" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <div class="annotations">
                      <div class="annotation-rs"
                           v-for="(item,index) in scope.row.taskTypes" :key="index">
                        <span>{{item.value}}</span>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="caseType" label="负责内容" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <div class="annotations">
                      <div class="annotation-rs"
                           v-for="(item,index) in scope.row.caseTypes" :key="index">
                        <span>{{item.value}}</span>
                      </div>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="操作" width="90px">
                  <template slot-scope="scope">
                    <a @click="editInfo(scope.row.id)">编辑</a>
                    <a @click="delInfo(scope.row.id)">删除</a>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
    </div>
</template>

<script>

export default {

    data() {
        return {
            tableData: [ {
              teamName: '小组一',
              outsourceFlag: '是',
              adminName: '张三',
              testValues: [
                {
                  code: '001',
                  value: '测试一'
                },
                {
                  code: '002',
                  value: '测试二'
                },
                {
                  code: '003',
                  value: '测试三'
                }
              ],
              taskTypes: [
                {
                  code: '001',
                  value: '任务一'
                },
                {
                  code: '002',
                  value: '任务二'
                },
                {
                  code: '003',
                  value: '任务三'
                },

              ],

              caseTypes: [
                {
                  code: '001',
                  value: '吃'
                },
                {
                  code: '002',
                  value: '喝'
                },
                {
                  code: '0023',
                  value: '玩'
                },

              ],
            },
              {
                teamName: '小二',
                outsourceFlag: '是',
                adminName: '李四',
                testValues: [
                  {
                    code: '001',
                    value: '测试一'
                  },

                ],
                taskTypes: [
                  {
                    code: '001',
                    value: '任务一'
                  },
                ],
                caseTypes: [
                  {
                    code: '001',
                    value: '玩'
                  },

                ],
              },
              {
                teamName: '小组一',
                outsourceFlag: '是',
                adminName: '张三',
                testValues: [
                  {
                    code: '001',
                    value: '测试一'
                  },
                  {
                    code: '002',
                    value: '测试二'
                  },
                  {
                    code: '003',
                    value: '测试三'
                  }
                ],
                taskTypes: [
                  {
                    code: '001',
                    value: '测试一'
                  },
                  {
                    code: '002',
                    value: '测试二'
                  },
                  {
                    code: '003',
                    value: '测试三'
                  }

                ],

                caseTypes: [
                  {
                    code: '001',
                    value: '测试一'
                  },
                  {
                    code: '002',
                    value: '测试二'
                  },
                  {
                    code: '003',
                    value: '测试三'
                  }

                ],
              },],
        }
    },
    methods: {

    }
}
</script>

<style scoped>
>>> .has-gutter tr>th:nth-child(2){
  padding-left: 10px !important;
}

>>> .el-table--enable-row-transition .el-table__body td:nth-child(2){
  padding-left: 10px !important;
}
>>> .has-gutter tr>th:nth-last-child(2){
  text-align:center;
}

>>> .el-table--enable-row-transition .el-table__body td:last-child{
  padding-left: 10px !important;
}

 >>> .el-table--enable-row-transition .el-table__body td{
   padding:0;
 }
 >>> .cell .el-tooltip{
   padding:0 !important;
 }
 >>> .el-table .cell{
   padding: 0 !important;
 }
 .annotation-rs:last-child{
   border:0;
 }

 .annotation-rs{
   margin-top: 5px;
   border-bottom: 1px solid #EBEEF5;
 }
</style>
INSist小白
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Element-UI Table单击某个一行改变其背景颜色
weixin_45502613的博客
12-11 4507
1、先开启element的高亮选项 开启 highlight-current-row <el-table id="exprotTable" border stripe highlight-current-row v-loading="loading" ...
element ui table编辑（作用域插槽）
09-17
element ui table编辑（作用域插槽）
elementUI中Table表格问题的解决方法
12-12
前言 element ui是一个非常不错的vue的UI框架，element对table进行了封装，简化了vue对表格的渲染。 在开发vue框架项目时，引入element插件，使用table表格组件时，遇到了一些问题，以下列出以供参考。 1.表格样式问题： 混乱样式.png 正常样式.png 如上图，在当前导航表格table样式是没问题的，但当我点击别的导航去到另外的页面，然后再回到之前的导航页面，表格table的样式就会混乱，随便点击当前页面或刷新亦或拉伸页面，样式又恢复正常,很奇怪的样式问题。 打开调试之后，发现table的宽度并没有按照100%来显示，而是根据表格宽度值来计算的（我
Element-UI中关于table表格的那些骚操作
qq_43248623的博客
04-09 1455
最近的项目中使用到element-ui组件库，由于做的是后台管理系统，所以经常需要操作表格，编辑样式的过程中遇到一些问题，官网针对table给出了很多的api，自己可以自定义，基本能满足产品需求，但是没有给出具体的案例，网上的资料也比较简略，这里简单整理下一些常用的操作，如果有类似的功能可以做一个参考。 具体的使用方法还是建议仔细阅读官网-table章节： https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-slot..
element ui 表格修改表头和每行的样式 去掉边框 每行的触发事件文字过长改变弹框宽度
qq_45700938的博客
06-23 623
element ui 表格
Element UI 之table表格样式
qq_43519782的博客
03-31 2827
需求： 鼠标移入： <template> <el-table :data="tableData" style="width: 800px" height="500px" :header-cell-style="{ background: '#1C2E45', height: '40px', padding: '0', color: '#a0b2d3', }" :cell-style="ce
element组件样式修改方式
W936438835的博客
03-11 3479
element组件样式修改方式，更新中...
element ui 修改el-table的单元格样式
qq_59626859的博客
06-12 915
查看文档会发现element 自带属性可以修改样式。header-cell-style用于修改头部样式。其中的cell-style绑定事件来修改单元格样式。el-table的默认效果。
Element el-table 列表自动滚动
ALDNOAH_K的博客
12-20 2346
Element el-table 列表自动滚动
elemenui中表格自定义样式row-class-name
Eddie_Xu的博客
06-29 4714
在日常开发中，el-table是经常用到的一个标签，有些时候需要将某些内容高亮显示，如下图： 官方文档示列： 可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。 代码： 照着文档，在table标签中加入 :row-class-name=“tableRowClassName”，同时在script里写想要的css样式，发现没有任何变化。 通过查看审查元素可以发现，指定列已经赋上了class，如下图： 仔细对比官方文档，只有
修改Element-ui表格样式
weixin_56521599的博客
06-23 2082
修改表格头部背景 .el-table th{ background: #f00; } 修改表格行背景 .el-table tr{ background: #f00; } 修改斑马线表格的背景 .el-table--striped .el-table__body tr.el-table__row--striped td { background: #1f2; } 修改行内线的颜色 .el-table td,.building-top .el-table th.is-le
element-ui 中的table的列隐藏问题解决
12-12
element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的。之前用bootstrap做的表格，想要实现简短列和详细列的切换。因为详细列实在有太多列了，拉动滚动条还有一段距离。所以希望能够切换到简短列...
element-ui table组件如何使用render属性的实现
01-19
在使用 element-ui table组件时，由于表列比较多一个个写特别麻烦，所以想通过将所有表头定义成一个数组，通过遍历多方式去实现。这样解决了手写很多 el-table-column 的情况。 障碍： 类似于下面自定义表列的样式，...
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
10-17
主要介绍了Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
修改element中表格的样式
小泥鳅
08-01 574
想修改组件中的样式，第一步，需要去掉css的局部作用 修改表头的背景色 方法：找到自己网页的源代码，利用类名一层一层的向下找，然后修改他的样式 值得注意的是：① 必须找自己对应的类名；② 如果没效果加个importment试试； 修改整个表格内容的背景色 方法：和上面类似，一层一层 的找类名 修改整个表格的斑马线样式 方法：根据行索引把行内容分为两种，返回对应的类名，并给两类类名加不同的背景颜色即可； 效果 修改表头文字样式 效果 修改表格内容文字样式 修改表格每行的高度 也是一
修改elementui表格的默认样式
最新发布
robotmen的专栏
12-25 393
/ ----------修改elementui表格的默认样式-----------// 当表格只有横向滚动条，没有纵向滚动条时。// hover高亮。// 当表格有纵向滚动条时。// 解决表格固定列问题。// 当表格没有滚动条时。
element-UI-----vue表格修改某个单元格的样式（可以增加html结构）
weixin_45458830的博客
11-24 1426
render-header加在表格的列el-table-column 上。render-header就可以做更复杂的样式，增加布局上的修改。
element 表格实用的样式修改
notagoodwriter的博客
04-28 694
element 表格实用的样式修改
element-ui 自定义table表格样式
热门推荐
悦度空间
06-18 2万+
查更多资源 1.案例说明： vue项目中，使用element-ui，根据设计，更改table表格样式，包括表头、字体、背景色、边框、鼠标动作等； 2.案例图示： 3.案例代码 - 方法一： 4.案例代码 - 方法二： //自定义-表格样式 .table-text-blue{ color: $blueColor; cursor:pointer; } .tabl...
element ui table 表格 行高设置不生效
06-10
如果 Element UI 表格的行高设置不生效，可能是因为你的样式被其他样式覆盖了。你可以尝试使用 !important 关键字来强制应用你的样式，或者在样式选择器前加上更具体的选择器，以提高样式的优先级。 例如，假设你想...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值