在el-table第一例插入斜线的方法

最新推荐文章于 2023-12-15 16:44:14 发布

最冷一天.

最新推荐文章于 2023-12-15 16:44:14 发布

阅读量280

点赞数

分类专栏：工作经验文章标签： vue.js

本文链接：https://blog.csdn.net/m0_61603704/article/details/130752062

版权

工作经验专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在el-table第一例插入斜线的方法


```clike

```clike
```vue
<template>
  <div>
    <div class="title">测试表格</div>
    <el-table
      :data="tableDataTop.length > 0 ? tableDataTop : []"
      style="width: 100%"
      border
      v-loading="loading"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center', padding: '10px' }"
      :row-style="{ height: '20px' }"
    >
        
        // 关键代码
      <el-table-column prop="" label="标准" width="153">
        <el-table-column prop="time" label="时间" width="121">
        </el-table-column>
      </el-table-column>

     
  </div>
</template>

<script>
export default {
 
};
</script>
<style lang="scss" scoped>

// 关键代码
::v-deep .el-table thead.is-group th {
  background: none;
}
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {
  border-bottom: none;
}
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 75px; /*这里需要自己调整，根据td的宽度和高度*/
  top: 0;
  left: 0;
  background-color: grey;
  opacity: 0.3;
  display: block;
  transform: rotate(-54deg); /*这里需要自己调整，根据线的位置*/
  transform-origin: top;
}
::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 75px; /*这里需要自己调整，根据td的宽度和高度*/
  bottom: 0;
  right: 0;
  background-color: grey;
  opacity: 0.3;
  display: block;
  transform: rotate(-54deg); /*这里需要自己调整，根据线的位置*/
  transform-origin: bottom;
  // background:red;
}
</style>