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

<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>

 

            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;
                })
            }

 

posted @ 2020-01-06 15:06  liulun  阅读(2006)  评论(1编辑  收藏  举报