el-table添加、编辑、合并单元格
1. vue el-table2. 添加空行3. 双击编辑并聚焦4. 合并单元格
1. vue el-table
给表格设置ref，给行设置高度:row-style="{height: '60px'}"，用于滚动 绑定key用于刷新表格
{{ scope.row.name }}
{{ scope.row.remark }}
保存
新增
2. 添加空行
给树形子级添加一行，滚动到添加行并聚焦
// 添加空行
addEmptyRow(row, index) {
if (!row.children) {
row.children = []
}
let obj = {
id: "id-" + row.id,
name: "",
remark: "",
addNew: true,
}
row.children.push(obj)
// 定位/聚焦到新增行
this.$nextTick(() => {
this.$refs.diffeDataTable.bodyWrapper.scrollTop = (index + row.children.length - 2) * 60;
$("#" + obj.id).focus()
})
}
3. 双击编辑并聚焦
// 编辑-双击单元格触发事件
doubleClick(row, column) {
this.$set(row, column.property + 'Show', true)
// 聚焦方法一：根据ref聚焦
// 聚焦事件需要更新表格
this.updateTable()
this.$nextTick(() => {
this.$refs[column.property] && this.$refs[column.property].focus()
})
// 聚焦方法二：根据id聚焦
this.$nextTick(() => {
$("#" + row.id).focus()
})
},
// 编辑-输入框失焦事件
subEditForm(row, column) {
row[column.property + 'Show'] = false
// 请求后台，根据后端要求填写参数
},
// 更新表格
updateTable() {
this.MathRandom = Math.random()
},
4. 合并单元格
// ------------------ 合并单元格 ------------------
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
// 一级
if (row.level == 0) {
if (columnIndex === 1) {
return [1, 6];
} else if (columnIndex === 0) {
return [0, 0];
} else if (columnIndex === 2) {
return [0, 0];
} else if (columnIndex === 3) {
return [0, 0];
}
}
// 二级
if (row.level === 1) {
if (columnIndex === 1) {
return [1, 5];
} else if (columnIndex === 0) {
return [0, 0];
} else if (columnIndex === 2) {
return [0, 0];
} else if (columnIndex === 3) {
return [0, 0];
}
}
},
推荐阅读
您阅读本篇文章共花了：
发表评论