记录表格自动列宽

//表格自动列宽

function gitColumns(tab, label, prop, _this, Textsize) {

    return new Promise((resolve) => {

        let table = JSON.parse(JSON.stringify(tab));

        let data = createDom(table, label, prop, Textsize);

        computeDom(data, _this).then((res) => {

            res.map(item => {

                let index = table.columns.findIndex(tar => tar[prop] == item.prop);

                table.columns[index].width = Math.max.apply(null, item.lenArr) + 20

            })

            resolve(table)

            let para = document.getElementById("para14159265358979");

            document.body.removeChild(para);

        });

    })

    function createDom(tab, label, prop, Textsize) {

        //生成节点 生成数据

        let table = JSON.parse(JSON.stringify(tab));

        let allData = []; //计算dom所需要数据

        var para = document.createElement("p");

        para.id = "para14159265358979";

        para.style.position = "absolute";

        para.style.top = "0px";

        para.style.left = "0px";

        para.style.zIndex = -1;

        para.style.visibility = "hidden";

        for (let i = 0; i < table.columns.length; i++) {

            let br = document.createElement("br")

            let item = table.columns[i];

            let child = document.createElement("span");

            child.style.display = "inline";

            if (Textsize)

                child.style.fontSize = Textsize;

            child.id = "para14159265358979_" + table.columns[i][prop];

            para.appendChild(br);

            para.appendChild(child);

            //计算数据

            let arr = [];

            arr.push(table.columns[i][label]);//表头

            let footlabel = 0;

            if (table.columns[i].f_sum == 1) {//有合计

                table.data.map(item => {

                    footlabel += Conv.ToDouble(item[table.columns[i][prop]])

                })

                footlabel = Conv.ToFixed(footlabel, 4)

            }

            arr.push(footlabel);

            table.data.map((tmp) => {

                for (let key in tmp) {

                    if (key == item[prop]) {

                        arr.push(tmp[key]);

                    }

                }

            });

            allData.push({ arr: arr, prop: item[prop], lenArr: [] });

        }

        var body = document.body;

        body.appendChild(para);

        return allData;

    }

    function computeDom(tab, _this) {

        let length = 0;

        tab.map((item, index) => {

            if (index == 0) {

                length = item.arr.length

            } else {

                if (item.arr.length > length) {

                    length = item.arr.length

                }

            }

        })

        return new Promise((resolve) => {

            for (let i = 0; i < length; i++) {

                setTimeout(() => {

                    tab.map((item) => {

                        document.getElementById("para14159265358979_" + item.prop).innerHTML =

                            item.arr[i];

                        _this.$nextTick(() => {

                            let len = document

                                .getElementById("para14159265358979_" + item.prop)

                                .getBoundingClientRect().width

                            item.lenArr.push(len);

                        });

                    });

                }, 0 * i);

            }

            setTimeout(() => {

                resolve(tab);

            });

        });

    }



}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值