vxe-自定义排序图标与更改分辨率表格列内容正常显示

1.实现目的

（1）更改表格图标排序交互效果，上下箭头形式无法实现点击整体模块实现排序的实现。

（2）vxe表格通过属性设置放大缩小更改分辨率后，表格列字段出现滚动条，现在需求是更改分辨率后表格列字段内容完全显示，且初始100%时表格列展示完全。

2.现有效果

排序为上下箭头形式，且可实现左侧拉伸单元列宽。放大缩小后出现省略号。

3.主体代码参考

3.1更改排序图标

vxe-table表格属性更改

 <vxe-table
                    ref="xTable1"
                    show-overflow
                    row-id="id"
                    height="96%"
                    :loading="loading"
                    :data="tableData"
                    :row-config="{ isHover: true }"
                    :show-header-overflow="true"
                    :column-config="{ resizable: true }"
                    class="my-sort"
                    :sort-config="{showIcon: false,remote: true,trigger: 'cell',orders: ['desc', 'asc', null]}"
                    @sort-change="sortChangeEvent"
                >

表头列字段设置

<vxe-column field="yoyo" align="left" min-width="165" title="no" sortable :formatter="getConnect">
                        <template #header="{ column }">
                            <span>{{ column.title }}</span>
                            <span class="custom-sort" :class="{'is-order': column.order}">
                                <i :class="[column.order ? `vxe-icon-sort-numeric-${column.order}` : 'vxe-icon-sort']"></i>
                            </span>
                        </template>
                    </vxe-column>

?css样式修改。

// 表头排序样式
.my-sort .custom-sort {
    padding: 0 4px;
}
.my-sort .custom-sort.is-order {
    color: #409eff;
}

3.2分辨率显示完全

html结构,设置每一列最小宽度，所有最小宽度相加等于表格所占宽度。

   <vxe-column field="yoyo" align="left" min-width="165" title="no" sortable :formatter="getConnect">
                        <template #header="{ column }">
                            <span>{{ column.title }}</span>
                            <span class="custom-sort" :class="{'is-order': column.order}">
                                <i :class="[column.order ? `vxe-icon-sort-numeric-${column.order}` : 'vxe-icon-sort']"></i>
                            </span>
                        </template>
                    </vxe-column>

css强制表格列内容显示在一行内，不换行。

/deep/.vxe-table--render-default .vxe-cell{
    white-space: nowrap !important;
    padding-left: 5px !important;
    padding-right: 0 !important;
}

4.实现效果