1. Toy模板网首页
  2. > Toy博客

(Table)操作：Element-ui 中 Table 表格的设置表头/去除下标线/设置行间距等属性的使用及 slot-scope=“scope“ 的使用案例

9月前 作者：狮子座的男孩 分类：Toy博客 阅读(44) 违法举报

这篇具有很好参考价值的文章主要介绍了(Table)操作：Element-ui 中 Table 表格的设置表头/去除下标线/设置行间距等属性的使用及 slot-scope=“scope“ 的使用案例。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Ⅰ、Element-ui 提供的Table组件与想要目标情况的对比：

1、Element-ui 提供Table组件情况：

其一、Element-ui 自提供的Table代码情况为(示例的代码)：

el-table中加边框和间距,# Element-ui 专栏,javascript,elementui,table表格,经验分享,vue

// Element-ui 自提供的代码：
 <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>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

代码地址：https://element.eleme.cn/#/zh-CN/component/table

其二、页面的显示情况为：

el-table中加边框和间距,# Element-ui 专栏,javascript,elementui,table表格,经验分享,vue

2、目标修改后的情况:

el-table中加边框和间距,# Element-ui 专栏,javascript,elementui,table表格,经验分享,vue

Ⅱ、实现 Table 表格达到目标效果变化的过程：

1、Table 表格设置表头及去除下标线等属性的修改：

其一、代码：

<style lang="scss" scoped>
//设置表头的背景色(可以设置和页面背景色一致):
/deep/.el-table th {
  background-color: #00083e;
}
//设置表每一行的背景色,字体颜色及字体粗细；
/deep/.el-table tr {
  background-color: rgba(150, 157, 128, 0.9);
  color: #fff;
  font-weight: 500;
}
//去除表格每一行的下标线；
/deep/.el-table td {
  border-bottom: none;
}
//去除表头的下标线；
/deep/.el-table th.is-leaf {
  border-bottom: none;
}
//去除表格的最下边框线；
.el-table::before {
  height: 0;
}
//设置表格的背景色问题(否则一般默认的背景色是白色)；
.el-table,
.el-table__expanded-cell {
  background-color: #00083e;
}
</style>

其二、效果展示：

A、页面表格展示为：

el-table中加边框和间距,# Element-ui 专栏,javascript,elementui,table表格,经验分享,vue

B、存在的问题：悬停背景为白色

el-table中加边框和间距,# Element-ui 专栏,javascript,elementui,table表格,经验分享,vue

2、Table 表格去除悬停背景色及设置行间距等属性的修改：

其一、代码：

<style lang="scss" scoped>
// 设置整个表格的内边距问题:
.container-table {
  padding: 0 30px 0 30px;
}
//设置表头的背景色(可以设置和页面背景色一致):
/deep/.el-table th {
  background-color: #00083e;
}
//设置表每一行的背景色,字体颜色及字体粗细；
/deep/.el-table tr {
  background-color: rgba(150, 157, 128, 0.9);
  color: #fff;
  font-weight: 500;
}
//去除表格每一行的下标线；
/deep/.el-table td {
  border-bottom: none;
}
//去除表头的下标线；
/deep/.el-table th.is-leaf {
  border-bottom: none;
}
//去除表格的最下边框线；
.el-table::before {
  height: 0;
}
//设置表格的背景色问题(否则一般默认的背景色是白色)；
.el-table,
.el-table__expanded-cell {
  background-color: #00083e;
}
//设置表格的行间距；
::v-deep .el-table__body {
  -webkit-border-vertical-spacing: 13px;
}
//设置标题行(th)的字体属性；
::v-deep .el-table th > .cell {
  line-height: 11px;
  font-size: 5px;
  padding-left: 20px;
}
//设置 table 中的每个 cell 的属性值；
::v-deep .el-table .cell {
  padding-left: 20px;
  line-height: 58px;
}
//设置 table 中的 th td 的 padding 值；
::v-deep .el-table td,
::v-deep .el-table th {
  padding: 0;
}
//将表格的每一行悬停的背景色都设置为：transparent;
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: transparent;
}
</style>

其二、效果展示：

A、页面表格展示为：

el-table中加边框和间距,# Element-ui 专栏,javascript,elementui,table表格,经验分享,vue

B、解决：悬停背景问题(即：悬停背景色设置为 transparent )；
el-table中加边框和间距,# Element-ui 专栏,javascript,elementui,table表格,经验分享,vue

3、Table 表格使用 slot-scope=“scope“ 插入序号的修改：

其一、代码：

<style lang="scss" scoped>
// 设置整个表格的内边距问题:
.container-table {
  padding: 0 30px 0 30px;
}
//设置表头的背景色(可以设置和页面背景色一致):
/deep/.el-table th {
  background-color: #00083e;
}
//设置表每一行的背景色,字体颜色及字体粗细；
/deep/.el-table tr {
  background-color: rgba(150, 157, 128, 0.9);
  color: #fff;
  font-weight: 500;
}
//去除表格每一行的下标线；
/deep/.el-table td {
  border-bottom: none;
}
//去除表头的下标线；
/deep/.el-table th.is-leaf {
  border-bottom: none;
}
//去除表格的最下边框线；
.el-table::before {
  height: 0;
}
//设置表格的背景色问题(否则一般默认的背景色是白色)；
.el-table,
.el-table__expanded-cell {
  background-color: #00083e;
}
//设置表格的行间距；
::v-deep .el-table__body {
  -webkit-border-vertical-spacing: 13px;
}
//设置标题行(th)的字体属性；
::v-deep .el-table th > .cell {
  line-height: 11px;
  font-size: 5px;
  padding-left: 20px;
}
//设置 table 中的每个 cell 的属性值；
::v-deep .el-table .cell {
  padding-left: 20px;
  line-height: 58px;
}
//设置 table 中的 th td 的 padding 值；
::v-deep .el-table td,
::v-deep .el-table th {
  padding: 0;
}
//将表格的每一行悬停的背景色都设置为：transparent;
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: transparent;
}
//设置插入 scope 的用于标记序号的圆；
.table-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgb(106, 248, 18);
  margin: 6px 5px 0 0;
  display: inline-block;
  text-align: center;
  line-height: 29px;
}
//设置插入 scope 的值考左对齐； 
.table_right{
  float: left;
}
//将插入 sope 的最后一个 icon 值设置为：不显示；
.table_right:last-of-type {
  /deep/.el-icon-right {
    display: none;
  }
}
// 设置 Element-ui 小图标的属性；
.el-icon-right{
  width: 20px;
  height: 20px;
  padding: 0 5px 0 5px;
  color: red;
}
</style>

其二、效果展示：

// 此时是将数据中的序号和 element-ui 的 icon 加上了；
el-table中加边框和间距,# Element-ui 专栏,javascript,elementui,table表格,经验分享,vue

Ⅲ、修改 Table 表格达到目标效果的展示：

1、整体的代码(即：总的代码)：

<template>
  <div class="container">
    <el-table 
      :data="tableData" 
      :height="tabHeight"
      :width="tabWidth"
      class="container-table" 
      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 prop="process" label="">
        <!-- 此时就是 slot-scope="scope" 的使用过程: -->
        <template slot-scope="scope">
          <div
           class="table_right"
           v-for="(iterm, indx) in scope.row.process" 
           :key="indx" 
           style="float: left; color: black"
           >
            <span class="table-circle">{{ iterm.order }}</span>
            <!-- 此时引入的是：element-ui 中的 icon 值； -->
            <span class="el-icon-right"></span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // tabHeight 与 tabWidth 是为了设置：表格的宽度与高度(即：在页面中的展示位置);
      tabHeight: window.innerHeight - 150,
      tabWidth: window.innerWidth - 1000,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
           process: [
            {
              order: "01",
            },
            {
              order: "02",
            },
            {
              order: "03",
            },
            {
              order: "04",
            },
            {
              order: "05",
            },
          ],
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
           process: [
            {
              order: "01",
            },
            {
              order: "02",
            },
            {
              order: "03",
            },
            {
              order: "04",
            },
            {
              order: "05",
            },
          ],
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
           process: [
            {
              order: "01",
            },
            {
              order: "02",
            },
            {
              order: "03",
            },
            {
              order: "04",
            },
            {
              order: "05",
            },
          ],
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
           process: [
            {
              order: "01",
            },
            {
              order: "02",
            },
            {
              order: "03",
            },
            {
              order: "04",
            },
            {
              order: "05",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
// 设置整个表格的内边距问题:
.container-table {
  padding: 0 30px 0 30px;
}
//设置表头的背景色(可以设置和页面背景色一致):
/deep/.el-table th {
  background-color: #00083e;
}
//设置表每一行的背景色,字体颜色及字体粗细；
/deep/.el-table tr {
  background-color: rgba(150, 157, 128, 0.9);
  color: #fff;
  font-weight: 500;
}
//去除表格每一行的下标线；
/deep/.el-table td {
  border-bottom: none;
}
//去除表头的下标线；
/deep/.el-table th.is-leaf {
  border-bottom: none;
}
//去除表格的最下边框线；
.el-table::before {
  height: 0;
}
//设置表格的背景色问题(否则一般默认的背景色是白色)；
.el-table,
.el-table__expanded-cell {
  background-color: #00083e;
}
//设置表格的行间距；
::v-deep .el-table__body {
  -webkit-border-vertical-spacing: 13px;
}
//设置标题行(th)的字体属性；
::v-deep .el-table th > .cell {
  line-height: 11px;
  font-size: 5px;
  padding-left: 20px;
}
//设置 table 中的每个 cell 的属性值；
::v-deep .el-table .cell {
  padding-left: 20px;
  line-height: 58px;
}
//设置 table 中的 th td 的 padding 值；
::v-deep .el-table td,
::v-deep .el-table th {
  padding: 0;
}
//将表格的每一行悬停的背景色都设置为：transparent;
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: transparent;
}
//设置插入 scope 的用于标记序号的圆；
.table-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgb(106, 248, 18);
  margin: 6px 5px 0 0;
  display: inline-block;
  text-align: center;
  line-height: 29px;
}
//设置插入 scope 的值考左对齐； 
.table_right{
  float: left;
}
//将插入 sope 的最后一个 icon 值设置为：不显示；
.table_right:last-of-type {
  /deep/.el-icon-right {
    display: none;
  }
}
// 设置 Element-ui 小图标的属性；
.el-icon-right{
  width: 20px;
  height: 20px;
  padding: 0 5px 0 5px;
  color: red;
}
</style>

2、整体效果的展示：

el-table中加边框和间距,# Element-ui 专栏,javascript,elementui,table表格,经验分享,vue

Ⅳ、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482文章来源地址https://www.toymoban.com/news/detail-665179.html

到了这里，关于(Table)操作：Element-ui 中 Table 表格的设置表头/去除下标线/设置行间距等属性的使用及 slot-scope=“scope“ 的使用案例的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • element-ui 表格el-table高度不是一个固定值时固定表头

    element-ui 表格el-table高度不是一个固定值时固定表头

    elementui中为表格组件提供了height属性实现固定表头 height可以为数字或者字符串，当为一个数字时表示固定的高度，也可以为百分比等字符串。 当height不是一个固定值时，如期望表格可以填充完页面剩余空间，并且固定表头时，可以通过给height属性赋值字符串形式实现。以页

    2024年01月25日
    浏览(72)

  • vue+Element UI Table表格动态渲染表头内容及操作按钮

    循环表格头信息数组 封装操作组件并引入表格文件内 配置表头信息数组及添加操作事件

    2024年02月13日
    浏览(72)

  • element-ui table 设置表格滚动条位置

    场景: 在切换不同页面时（被 keep-alive 缓存的组件间切换），页面中的element-ui table的滚动条位置没有停留在原来的位置。目前需要切换不同的页面返回来后，滚动条保持在原来的位置。 代码：

    2024年02月11日
    浏览(58)
  • 基于element-ui的table实现树级表格操作及单元格合并

    基于element-ui的table实现树级表格操作及单元格合并

    如题，公司业务需求，数据结构比较复杂，需要在一张表内实现多级树状数据展示及同属性的单元格合并，并在表格内实现增删改操作。 网上翻阅了很多实例，没有能解决所有需求的案例，于是自己实现了一套。 时间匆忙，逻辑有优化的地方还请无偿指出！ 最终效果如下

    2024年02月14日
    浏览(49)
  • element-ui里el-table表格操作列多横线怎么解决

    element-ui里el-table表格操作列多横线怎么解决

    在vue中封装了element-ui表格，然后使用插槽，fixed定位等，导致样式出现了错乱 本文就到此结束了，希望大家共同努力，早日拿下 el 💪💪。 如果文中有不对的地方，或是大家有不同的见解，欢迎指出 🙏🙏。 如果大家觉得所有收获，欢迎一键三连💕💕。

    2024年02月11日
    浏览(56)
  • Vue+Element-ui实现表格嵌套表格（表头不同）

    Vue+Element-ui实现表格嵌套表格（表头不同）

    data中integrateList根据后端返回的json数据确定，其格式为：

    2024年02月14日
    浏览(67)
  • vue element-ui表格组件动态多级表头

    vue element-ui表格组件动态多级表头

    实际项目的需求，需要根据后端动态获取的方式来初始化表格的表头包含哪些信息，且有很多信息是有规律的，所以我们需要Element UI动态生成多级表头。需要的效果图如下： 由于统计维度是可变化的（它可以是省市也可以是区县），所以需要专门设置一个表格的数据来保存

    2024年02月10日
    浏览(55)
  • 给 element-ui 表格的表头添加icon图标

    给 element-ui 表格的表头添加icon图标

    el-table icon图标 的设置，使用  slot=\\\"header\\\"  插槽，然后直接通过设置类名为  el-icon-iconName  来使用即可。 效果展示：

    2024年02月16日
    浏览(43)
  • 【element-ui】使用el-checkbox完成el-table表格数据的全选操作

    【element-ui】使用el-checkbox完成el-table表格数据的全选操作

    需求：表格有一列为勾选框列，表格下面有单独的按钮本页勾选和全部勾选，跨页状态可以保存回显，如下图所示： 思路：使用一个数组[]存储每一页是否全选的状态，再使用{}来存储数据的所有选中状态，其中key为对应的页码，value为每一页的选中数据【核心❗】 1、el-tab

    2024年02月11日
    浏览(51)
  • element-ui自定义表头；el-table自定义表头；render-header自定义表头

    element-ui自定义表头；el-table自定义表头；render-header自定义表头

    场景：给表头设置自定义按钮，点击时候 批量下载或做其他事件 给当前的那列设置 :render-header methods设置事件 element-ui自定义表头链接 注意：el-table-column需要去掉label和prop属性 然后使用插槽 slot

    2024年02月11日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包