handsontable自带右键新增表格行和删除行功能(afterchange钩子中),但是实际使用中,右键功能并不容易被发现,用户的使用体验不好,所以需要把新增行和删除行的功能拿出来,在表格外使用按钮实现表格行的新增和删除。实现的效果如下图所示:
html结构
<hot-table key="climate" ref="climateRegulateRef" :settings="climateReclassify"></hot-table>
<el-button type="success"
size="mini"
icon="el-icon-plus"
@click="addClimateReClassRow">
</el-button>
<el-button type="danger"
size="mini"
icon="el-icon-delete"
@click="removeClimateReclassifyRow">
</el-button>
表格数据初始化
climateReclassify: {
data: [{selectBox: false, newVal: 1, typeName: '农田', oldVal: '', type: ''}],
colHeaders: ['', '新值', '类型名称', '原值', '种类'],
colWidths: [50, 150, 150, 150, 150],
columns: [
{data: 'selectBox', type: 'checkbox'},
{data: 'newVal', type: 'numeric', readOnly: false},
{data: 'typeName'},
{data: 'oldVal'},
{data: 'type', editor: 'select', selectOptions: ['植被', '水体', '其他']}
],
height: '100%',
licenseKey: "non-commercial-and-evaluation" // 非商业用途声明
},
新增表格行函数
addClimateReClassRow: function () {
let climateTable = this.$refs.climateRegulateRef.hotInstance;
let data = climateTable.getSourceData()
data[data.length] = {selectBox: false, newVal: '', typeName: '', oldVal: '', type: ''};
climateTable.loadData(data)
}
删除表格行函数
removeClimateReclassifyRow() {
let climateTable = this.$refs.climateRegulateRef.hotInstance;
let indexArr = []
let sourceData = []
let data = climateTable.getSourceData().concat()
for (let i = 0; i < data.length; i++) {
if (data[i].selectBox === true) {
indexArr.push(i)
} else {
sourceData.push(data[i])
}
}
if (indexArr.length === 0) {
Message.warning("请至少选择一行数据删除");
return;
}
if (sourceData.length === 0) {
Message.warning("至少应保留一种类型");
return;
}
climateTable.loadData(sourceData);
}