自定义elementplus表格排序图标

591 阅读1分钟
.is-sortable {
    .caret-wrapper::after {
        content: '';
        height: 12px;
        width: 16px;
        background-image: url('@/assets/icon/sort.svg');
    }

    i {
        display: none;
    }
}

.ascending .caret-wrapper::after {
    background-image: url('@/assets/icon/sort_ascending.svg');
}

.descending .caret-wrapper::after {
    background-image: url('@/assets/icon/sort_descending.svg');
}

.caret-wrapper {
    padding-left: 15px;
}

原理很简单,就是用自己的图标替换掉排序时的不同状态!