el-table添加、编辑、合并单元格
1. vue el-table
给表格设置ref
,给行设置高度:row-style="{height: '60px'}"
,用于滚动
绑定key
用于刷新表格
<el-table border ref="diffeDataTable" :data="TreeList" :row-style="{height: '60px'}" highlight-current-row row-key="id" :tree-props="{children: 'children'}" :span-method="arraySpanMethod" default-expand-all sorable="custom" :key="MathRandom" @cell-dblclick="doubleClick">
<el-table-column type="index" label="序号" width="55"> </el-table-column>
<el-table-column prop="name" label="名称" min-width="300px" class-name="operate_name">
<template slot-scope="scope">
<el-input v-if="!!scope.row.addNew" :id="scope.row.id" :size="elTableTreeFormSize" v-model="scope.row.name"></el-input>
<span v-else>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" width="300">
<template slot-scope="scope">
<el-input v-if="!!scope.row.addNew" :size="elTableTreeFormSize" v-model="scope.row.remark"></el-input>
<el-input v-else-if="!scope.row.addNew && scope.row[scope.column.property + 'Show']" :ref="scope.column.property" :id="scope.row.id" :size="elTableTreeFormSize" v-model="scope.row.remark" @blur="subEditForm(scope.row, scope.column)"></el-input>
<span v-else>{{ scope.row.remark }}</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="200" class-name="operate-button">
<template slot-scope="scope" v-if="!!scope.row.parentId">
<Buttons v-if="!!scope.row.addNew" type="primary" @parentClick="subNewRow(scope.row)">
<span slot="title">保存</span>
</Buttons>
<Buttons v-else-if="scope.row.type ===0" type="primary" @parentClick="addEmptyRow(scope.row,scope.$index)">
<span slot="title">新增</span>
</Buttons>
</template>
</el-table-column>
</el-table>
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];
}
}
},