把iview的table做成更适合展现大量数据的样式(字体变小、去除多余的padding等)

2020-01-15 17:16:00 浏览数 (1)

代码语言:javascript复制
<style>
    .ivu-table {
        font-size: 12px !important;
    }

    .ivu-table-header thead tr th {
        padding: 0px !important;
        height: 26px;
        line-height: 26px;
    }

    .ivu-table-fixed-header thead tr th {
        padding: 0px !important;
        height: 26px;
        line-height: 26px;
        font-size: 12px;
    }

    .ivu-table-fixed-right-header {
        height: 29px !important;
    }

    .ivu-table-cell {
        white-space: nowrap !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .ivu-table td, .ivu-table th {
        height: 26px;
        line-height: 26px;
    }
</style>
代码语言:javascript复制
            let ele = this.$el;
            this.height = ele.clientHeight;
            this.width = ele.clientWidth;
            this.showTable = true;
            window.onresize = () => {
                this.showTable = false;
                this.$nextTick(() => {
                    this.height = ele.clientHeight;
                    this.width = ele.clientWidth;
                    this.showTable = true;
                })
            }

0 人点赞