uniapp table加载大数据卡死以及解决宽度不够又不能右边滑动问题

vue-easytable
每一列只有一个文字宽度问题解决
经过分析发现table-layout:为fixed
暴力提权覆盖样式
另外还要设置td th的文字都禁止换行

table {
     width: 100%;
     table-layout: auto  !important;
    border-collapse: collapse !important;
}

td {
    white-space: nowrap !important;
}
th{
        white-space: nowrap !important;
}

大数据问题

<lozn-table 
    
    :columns="columns" :table-data="rows" :scroll-width="0" :virtual-scroll-option="{enable:true}"
        :max-height="500" row-key-field-name="rowKey"
            :border-around="true"
                 :border-x="true"
                 :border-y="true"
            
         
         />

xx

感觉还是有点慢，在浏览器等了几秒能加载出来，但是感觉还是慢， 但是不至于直接无响应，
相关文档https://happy-coding-clans.github.io/vue-easytable/#/https://github.com/fall-zhang/vue-fantable

另外再移动端用不了这个fanttable
所以用宏定义封装

<template>
    <block v-if="H5">
        
        <fan-table style="height: 100%;"  fixed-header :columns="columns" :table-data="rows"
            row-key-field-name="rowKey" :border-around="true" :border-x="true" :border-y="true"
            :style="{'table-layout':'auto','word-break':'normal'}" />
            
<!--        
        <fan-table style="height: 100%;"  fixed-header :columns="columns" :table-data="rows" :virtual-scroll-option="{enable:true}"
            :max-height="600" row-key-field-name="rowKey" :border-around="true" :border-x="true" :border-y="true"
            :style="{'table-layout':'auto','word-break':'normal'}" />
             -->


    </block>
    <block v-else>
        <uni-table ref="table" border emptyText="暂无数据" sortable="true" class="tablestyle">
            <uni-tr>
                <block :data-index="index" :data-item="bean" v-for="(bean, index) in columns" :key="index">
                    <uni-th align="center">{{bean.title}}</uni-th>
                </block>
            </uni-tr>
            <uni-tr v-for="(item, index) in rows" :key="index">
                <block :data-index="index" :data-item="bean" v-for="(bean, index) in columns" :key="index">
                    <uni-td style="text-align: center;">
                        <view class="name">{{ item[bean.title] }}</view>
                    </uni-td>
                </block>
            </uni-tr>
        </uni-table>
    </block>

</template>

<script>
    export default {

        name: "smarttable",
        data() {
            return {
            H5:
            // #ifdef H5
                true
            // #endif
            // #ifndef H5
            false
            // #endif

            }
        },
        props: {
            rows: {
                type: Array,
                default: () => []
            },
            columns: {
                type: Array,
                default: () => []
            }
        }
    }
</script>

<style>

</style>