ElementUI table实现给表格的表头一个单元格斜线分隔线

效果:

代码:

<template>
    <div>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column :resizable="false" class-name="elChgTbeClmn" prop="date"  width="120">
                <template slot="header" slot-scope="scope">
                    <div class="elHeadCon">
                        <div class="headerCon1">区域</div>
                        <div class="headerCon2">类型</div>
                        <div class="headerLine"></div>
                    </div>
                </template>
            </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>
    </div>
</template>

<script>
export default {
    name: 'sysIndex',
    components: {},
    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 弄'
                }
            ]
        };
    },
    mounted() {},
    methods: {}
};
</script>

<style>
/* 如果单元格的padding */
.elChgTbeClmn .cell, .el-table th {
    padding: 0px !important;
}
.elHeadCon {
    height: 50px;
    position: relative;
}
.headerCon1 {
    position: absolute;
    left: 0;
    bottom: 0;
}
.headerCon2 {
    position: absolute;
    right: 0;
    top: 0;
}
.headerLine {
    width: 1px;
    height: 128px;
    transform: rotate(-68deg); /*这里需要自己调整,根据线的位置*/
    transform-origin: top;
    background-color: rgb(255, 145, 0);
    /* background-color:  #EBEEF5; */
}
</style>

参考:滑动验证页面

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现ElementUI表格增加行数和编辑单元格,可以通过以下步骤: 1. 在模板中添加el-table组件,并设置其属性和方法,如data、columns、show-header、cell-style等。 2. 在data中定义一个数组,作为表格的数据源,并初始化为一些默认数据。 3. 在methods中定义一个方法,用于在表格中增加一行数据。该方法可以通过push方法向data中的数组添加一行数据。 4. 在el-table-column中,可以通过设置editable属性来允许单元格编辑。同时,可以通过设置formatter属性来自定义单元格的显示内容。 下面是一个示例代码,实现一个包含增加行和编辑单元格功能的ElementUI表格: ```html <el-table :data="tableData" :show-header="true" :cell-style="{padding: '10px'}"> <el-table-column prop="name" label="名称" :editable="true" :formatter="formatName"></el-table-column> <el-table-column prop="age" label="年龄" :editable="true"></el-table-column> <el-table-column prop="address" label="地址" :editable="true"></el-table-column> </el-table> <button @click="addRow">增加行</button> ``` ```javascript data() { return { tableData: [ { name: '张三', age: 18, address: '北京市' }, { name: '李四', age: 20, address: '上海市' }, { name: '王五', age: 22, address: '广州市' } ] } }, methods: { addRow() { this.tableData.push({ name: '', age: '', address: '' }) }, formatName(row, column) { return row.name || '未命名' } } ``` 在上面的代码中,我们定义了一个包含三列的表格,并且设置了每一列都可以编辑。同时,我们定义了一个addRow方法,用于向表格中增加一行数据。此外,我们还定义了一个formatName方法,用于自定义名称列的显示内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值