使用iview的組件 Table 表格，有固定列，設置其中一個列適應屏幕大小

描述

在使用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>