在线Excel插件 handsontable 修复

HTML

<div class="btn-warp">
    <p class="text-left prompt-text">注意：请为同名客户在备注栏加以区分，以便生成唯一的客户编号</p> <!-- 修复 添加提示文案 -->
    <a href="javascript:;" @click="empty('clear')" class="btn btn-primary">清空</a> <!-- 修复新增内容清空按钮 -->
    <a href="javascript:;" @click="update()" class="btn btn-primary" style="margin-left: 50px">保存</a>
</div>

css

.btn-warp{
    text-align: center;
    padding-top:20px;
    position: relative;

    .prompt-text{
        position: absolute;
        top: 0px;
        left: 20%;
        color: red;
    }
}

javascript

newWorth: {
    options: {
        minRows: 1,  // 修复添加最小行数
        minSpareRows: 5,  // 修复 最小行空间，不足则添加空间
    }
}

ready () {
    this.initEditor();
},
methods: {
    initEditor(){  // 初始化编辑器实例
        let _this = this;
        _this.newWorth.container = document.getElementById('newWorth');
        _this.newWorth.containerCase = new Handsontable(_this.newWorth.container, _this.newWorth.options);
    },
    newWorthAdd (type) {
        /**
         * 修复点击关闭时，清空表格内容
         */
        (type === 'close') && (this.empty('clear'));
    },
    update () {
        /** 修复数据上传前，对数据进行加工处理，删除整行为空的数据  --start **/
        const dataFromProcess = this.processEditorData(_data);
        /** 修复数据上传前，对数据进行加工处理，删除整行为空的数据  --end **/

        _data = dataFromProcess.data;  // 接收加工后的数据

        /** 修复标记提示未填的必填字段 --start **/
        const effectiveRow = dataFromProcess.effectiveRow;  // 接收用户操作的行号
        let invalidCount = 0;  // 未填的必填字段个数
        const awaitPrompt = {};  // 未填的必填字段坐标信息，在整个表格中
        effectiveRow.forEach((value, index)=>{
            const currentField = this.newWorth.options.data[value];
            let circCount = 0;  // 列号

            for(let item in currentField){
                /**
                 * 必填字段仅为合同号、客户姓名、产品名字、份额、净值
                 */
                if(currentField[item] !== 'contract_number' || currentField[item] !== 'name' || currentField[item] !== 'product_name'
                    || currentField[item] !== 'fund_units' || currentField[item] !== 'fund_value'){return false};
                
                if(currentField[item] === '' || currentField[item] === null){
                    invalidCount++;

                    // 作 +1 处理，便于可视化输出
                    (!awaitPrompt[value+1]) && (awaitPrompt[value+1] = []);
                    awaitPrompt[value+1].push(circCount + 1)

                    this.newWorth.containerCase.setDataAtCell(Number(value), Number(circCount), '');  // 手动更改单元格，触发单元格背景变红
                }
                circCount++;
            }
        });

        if(invalidCount > 0){
            let msg = '必填字段：';
            for(let item in awaitPrompt){
                msg += `<br/>第 ${item} 行，第 ${awaitPrompt[item]} 列;`
            }
            window.layer.open({title:'　',icon:2,area : ['450px','250px'],content:msg})
            return false;   // 存在未填的必填字段，直接退出
        };
        /** 修复标记提示未填的必填字段 --end **/

        sendAjax({
            success (result) {
                if (result.error==0) {
                    _this.newWorthAdd('close');   // 保存成功后关闭 表格编辑器，并清空内容
                } else {

                }
            }
        });
    },
    /** 修复数据上传前，对数据进行加工处理，删除整行为空的数据  --start **/
    processEditorData(data){
        data = data.slice(0);  // 硬拷贝数据
        let effectiveRow = [];  // 存储非全空的行，用户已操作的行
        let delArr = [];
        let index = 0;

        for(let item of data){
            const objLength = Object.keys(item).length;

            let count = 0;
            for(let key in item){
                /**
                 * 默认单元格 value === '',
                 * 因为设置了最小行空间， 最小行空间的单元格 value === null
                 */
                (item[key] === '' || item[key] === null) && count++;
            };

            if(count === objLength){
                delArr.push(index);
            } else {
                effectiveRow.push(index);
            }
            index++;
        }

        delArr.reverse();
        for(let i of delArr){
            data.splice(i, 1);
        }

        return {'data': data, 'effectiveRow': effectiveRow};  // 返回加工后的数据
    },
    /** 修复数据上传前，对数据进行加工处理，删除整行为空的数据  --end **/
    
    /** 修复清空内容 --start **/
    empty(mark){
        if(mark != 'clear'){return false};
        this.newWorth.containerCase.clear();  // 这个是官方API的清除表格内容方法，但是实际效果不太行。还是需要用下面的手动清除表格内容才行
        this.newWorth.options.data.forEach((item, index)=>{
            for(let key in item){
                item[key] = ''
            }
        });

        /**
         * 手动清除数据时，会被编辑器认为是手动更改了编辑器，
         * 导致编辑器背景红色警告。
         * 采用先销毁编辑器，再创建编辑器的方法
         * 如果不事先清除数据的话，数据会被继承
         */
        this.newWorth.containerCase.destroy();
        this.initEditor();
    },
    /** 修复清空内容 --start **/
}