SOURCE

console 命令行工具 X clear

                    
>
console
var app = new Vue({
        el: '#app',
        data: {
            tData: [
                {col1:'col1',col2:'col2',col3:'col3',col4:'col4',col5:'col5'}
            ]
        },
        mounted: function () {
        },
        watch: {
         
        },
        methods: {
            
        }
    })
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/vxe-table/lib/index.css">
<!-- 引入脚本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script src="https://unpkg.com/xe-utils"></script>
<script src="https://unpkg.com/vxe-table"></script>

<div id="app" style="width:100vw;height:100vh;">

    <div style="width:100%;height:100%;">
        <vxe-table ref="xGrid2" border height="300px" size="mini"  :data="tData">

            <!-- 把下边循环的21改为20,就不会有问题,初步测试最大列为100列,超过后列的宽度设置就会失效 -->
            <vxe-table-column v-for="(item,i) in 21" align="center"  title="一级标题">
                <vxe-table-column align="right" width="100" field="col1" title="销售额"></vxe-table-column>
                <vxe-table-column align="right" width="100" field="col2" title="销售量"></vxe-table-column>
                <vxe-table-column align="right" width="100" field="col3" title="贡献度"></vxe-table-column>
                <vxe-table-column align="right" width="100" field="col4" title="贡献度"></vxe-table-column>
                <vxe-table-column align="right" width="100" field="col5" title="贡献度"></vxe-table-column>
            </vxe-table-column>
            
        </vxe-table>
    </div>

</div>

本项目引用的自定义外部资源