使用iview的组件 Table 表格，有固定列，设置其中一个列适应屏幕大小

最新推荐文章于 2023-05-20 17:08:30 发布

转载最新推荐文章于 2023-05-20 17:08:30 发布 · 5.9k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000016546419

文章标签：

#json

本文介绍在使用 iView 的 Table 组件时，如何解决固定列和自适应列宽的问题。通过计算表格总宽度与各列设定宽度的差值，实现特定列的自适应宽度调整，确保表格在不同屏幕尺寸下布局合理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

描述

在使用iview的组件Table表格时，有固定列，表格列宽不等。
在表格平铺时，不能自适应宽度。

问题

每个列有需要设置的宽度，有固定的列，很难调整某一列的宽度为刚刚好的。此时需要某一列自适应宽度。

解决

<template>
    <Table ref="testTable" border :columns="columns" :data="data"></Table>
</template>
<script>

    export default {
        data () {
            return {
                columns:[
                    {
                        title: 'Show',
                        key: 'show',
                        width: 100
                    },
                    {
                        title: 'Weak',
                        key: 'weak',
                        width: 250

                    },
                    {
                        title: 'Signin',
                        key: 'signin',
                        width: 100

                    },

                    {
                        title: 'Click',
                        key: 'click',
                        width: 300

                    },
                    {
                        title: 'Active',
                        key: 'active',
                        width: 150

                    },
                    {
                        title: '7, retained',
                        key: 'day7',
                        width: 150

                    },
                    {
                        title: '30, retained',
                        key: 'day30',
                        width: 150

                    },
                    {
                        title: 'The next day left',
                        key: 'tomorrow',
                        width: 150,
                        fixed:'right'

                    },

                ],
                data: this.mockTableData2(),
            }
        },
        mounted () {
            // 计算宽度
            this.columns=this.setTableBlankColumnsWidth(
                {
                    tableObj:this,
                    ref:'testTable',
                    columns:this.columns,
                    focusKey:'day7'
                }
            );

        },
        methods:{
            /**
             * 模拟 数据
             */
            mockTableData2 () {
                let data = [];
                function getNum() {
                    return Math.floor(Math.random () * 10000 + 1);
                }
                for (let i = 0; i < 10; i++) {
                    data.push({
                        name: 'Name ' + (i+1),
                        fav: 0,
                        show: getNum(),
                        weak: getNum(),
                        signin: getNum(),
                        click: getNum(),
                        active: getNum(),
                        day7: getNum(),
                        day30: getNum(),
                        tomorrow: getNum(),
                        day: getNum(),
                        week: getNum(),
                        month: getNum()
                    })
                }
                return data;
            },
            /**
             * 设置表头的宽度
             * @returns {Array}
             */
            getColumns(){
                let _columns=[];

                _columns=this.setTableBlankColumnsWidth(
                    {
                        tableObj:this,
                        ref:'testTable',
                        columns:this.columns,
                        focusKey:'day7'
                    }
                );
                return _columns;
            },
            /**
             * 2018年9月28日10:39:11
             * @author pink-pink
             * @describe 此方法可以作为公共方法调用，此处为了方便直接写在这里了。
             * 处理表格空白问题
             * 1. 获取到表格的宽度 tableClientWidth
             * 2. 所有列宽的和（CheckBox、序号、操作列等都计算在内） columnsWidthSum
             * 3. 自适应的列是，action 前面的列，即最后一个表格内容列 focusColumnKey
             * 4. columnsWidthSum<=tableClientWidth
             *
             * params tableObj  有表格组件的 this
             * params ref       表格的refName
             * params columns   表格的所有的列
             * params focusKey  指定放宽的列(没有此参数。默认是右侧固定列前面那个列)
             * @returns {Array}
             */
            setTableBlankColumnsWidth(json){
                let tableObj=json.tableObj || {};
                let columns=json.columns || [];
                let tableClientWidth=tableObj.$refs[json.ref] ? tableObj.$refs[json.ref].$el.clientWidth : 0;

                let columnsWidthSum=0;
                let otherColumnWidth=0;

                let focusColumn={};
                let focusColumnWidth=0;
                let focusIndex=-1;

                // 3. 操作列前面的表格内容列
                if(json.focusKey)
                {
                    // 有指定目标key
                    columns.forEach((column, columnIndex)=>{
                        if(column.key==json.focusKey)
                        {
                            focusColumn=column || {};
                            focusColumnWidth=focusColumn.width ? Number(focusColumn.width) : 0;
                            focusIndex=columnIndex;
                        }
                    });
                }
                else
                {
                    focusIndex=columns.length-2;
                    focusColumn=columns[focusIndex] || {};
                    focusColumnWidth=focusColumn.width ? Number(focusColumn.width) : 0;

                }

                // 2. 获取到，所有列宽的
                columns.forEach((column, columnIndex)=>{
                    columnsWidthSum+=Number(column.width);
                });
                // 拿到其他列的和
                otherColumnWidth=columnsWidthSum-focusColumnWidth;

                // 4. 计算
                if(columnsWidthSum<=tableClientWidth)
                {
                    columns[focusIndex] && (columns[focusIndex].width=tableClientWidth-otherColumnWidth);
                }

                return columns;
            }
        }
    }
</script>