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 **/
}
