我的编程空间,编程开发者的网络收藏夹
学习永远不晚

vue element 表头添加斜线的实现代码

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

vue element 表头添加斜线的实现代码


<template>
    <div class="app-container">
        <el-table :data="tableData3" style="width: 100%">
            <el-table-column width="120" prop="date"></el-table-column>
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column label="地址">
                <el-table-column prop="province" label="省份" width="120"></el-table-column>
                <el-table-column prop="city" label="市区" width="120"></el-table-column>
                <el-table-column prop="address" label="地址" width="300"></el-table-column>
                <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        filters: {},
        data() {
            return {
                tableData3: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }]
            }
        },
        created() {},
        methods: {}
    }
</script>
<style lang="scss">
    .el-table thead.is-group th {
        background: #fff;
    }
    
    .el-table thead.is-group tr:first-of-type th:first-of-type:before {
        content: '日期';
        text-align: center;
        position: absolute;
        width: 152px;
        height: 1px;
        bottom: 30px;
        right: 0;
    }
    
    .el-table thead.is-group tr:first-of-type th:first-of-type:after {
        content: '配送新增';
        text-align: center;
        position: absolute;
        width: 152px;
        top: 10px;
        left: 0;
    }
    
    .el-table thead.is-group tr:first-of-type th:first-of-type .cell {
        position: absolute;
        top: 0;
        left: 0;
        width: 152px;
        height: 1px;
        background-color: #EBEEF5;
        display: block;
        text-align: center;
        transform: rotate(38deg);
        transform-origin: top left;
        -ms-transform: rotate(38deg);
        -ms-transform-origin: top left;
        -webkit-transform: rotate(38deg);
        -webkit-transform-origin: top left;
    }
</style>

效果:

到此这篇关于vue element 表头添加斜线的文章就介绍到这了,更多相关vue element 表头添加斜线内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

vue element 表头添加斜线的实现代码

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Python实现自动添加脚本头信息的示例代码

前言 每个人写脚本时的格式都会有所不同,有的会注明脚本本身的一些信息,有的则开门见山,这在小团队里其实没什么,基本别人做什么你也都知道,但如果放到大的团队就比较麻烦了,因为随着人数的增多,脚本成指数增长,如果每个人风格不统一,到最后就会造成
2022-06-04

el-table表头添加勾选框的实现示例

本文主要介绍了el-table表头添加勾选框的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-01-28

Android输入框添加emoje表情图标的实现代码

前言 再次写聊天的时候才发现,代码积累是一件非常重要的事情,就如这篇博客的意图其实就是代码积累的目的,其实没什么难度,但是一件很琐碎的事情真的也需要时间去完成和调试,所以,获取你在写一个功能的时候会觉得并没有多难,但是如果可以最好把代码整理
2022-06-06

Android中封装RecyclerView实现添加头部和底部示例代码

前言我们大家都知道ListView具有添加头部和添加底部的方法,但是RecyclerView并没有这样子的方法。所以RecyclerView是不能添加底部和头部的,但是能不能仿造ListView来实现RecyclerView添加头部和底部呢
2023-05-30

Android中ActionBar和ToolBar添加返回箭头的实例代码

1.ActionBar添加返回箭头//onCreate方法中ActionBar actionBar = this.getSupportActionBar();actionBar.setTitle("搜索功能");actionBar.set
2023-05-30

vue-element-admin+flask实现数据查询项目的实例代码

这篇文章主要介绍了vue-element-admin+flask实现数据查询项目,填写数据库连接信息和查询语句,即可展示查询到的数据,需要的朋友可以参考下
2022-11-13

Android头像上传功能的实现代码(获取头像加剪切)

因为项目中需要用到头像上传的功能,所以就下个Ddmo先来实现下。demo我是类似仿微信的,在一个GridView中展示所有的图片,其中第一个item可以去照相;获取到图片后再进行剪切。图片的剪切是从网上找的感觉不错就用,暂时也没有测试。获取
2023-05-30

Vue动态组件表格的实现代码

这篇文章主要介绍了Vue动态组件表格的实现代码,包括框架结构组件,文中还给大家封装了几个组件,有按钮组件、图片组件、滑动开关,结合示例代码给大家详细讲解,需要的朋友可以参考下
2022-11-13

jQuery为iframe的body添加click事件的实现代码

jQuery为iframe的body添加click事件的实现代码,需要的朋友可以参考下。
2022-11-21

在Android中动态添加Panel框架的实现代码

这里说是框架,说的大了点,其实没有那么复杂,只是一个容易扩展的基类而已。不过至少算是框架类的代码。 代码如下:package arui; import android.app.Activity; import android.os.Ha
2022-06-06

node+vue实现用户注册和头像上传的实例代码

最近正好空闲,写了个实用注册代码,分享给大家,有需要的朋友可以了解一下数据库我使用的是MongoDB。 首先做文件上传,要保证协议里面的'Content-Type'为'multipart/form-data'。 注册的步骤:将用户名密码,图
2022-06-04

编程热搜

目录