elementUI表格属性：highlight-current-row(是否要高亮当前行)
el-table 配置属性 highlight-current-row 后 点击行触发 row-click 事件，会给当前行添加一个current-row 样式属性
思路：在需要编辑操作的列中设置span(显示数据)及input(编辑数据)通过current-row样式属性配置的权重控制显隐达到只读/编辑的效果。
html部分
{{isEdit?'只读':'编辑'}}
{{scope.row.result||0}}
{{scope.row.level||"-"}}
js部分
data: function () {
return {
isEdit: false, // 控制表格只读/编辑状态
userList: [{ // 列表数据
name: '瓜瓜',
result: 0,
level: ''
},
{
name: '康康',
result: 0,
level: ''
}, {
name: '军军',
result: 0,
level: ''
}, {
name: '江江',
result: 0,
level: ''
}
]
}
},
methods: {
/**
* 成绩输入回车/失去焦点统计
* @param {Number} index 行索引
* @param {Number} result 成绩
*/
handleInputBlurResult({
index,
result = 0
}) {
let level = '';
if (result >= 85) { //计算对应评级
level = 'A';
} else if (result >= 60) {
level = 'B';
} else {
level = 'C';
}
this.userList[index].level = level; //数据回填
}
}
css部分
.c-red {
color: #F56C6C;
}
.c-green {
color: #67C23A;
}
.tb-edit {
.el-input {
display: none
}
.current-row {
.el-input {
display: block
}
.el-input+span {
display: none
}
}
}
.tb-show {
.el-input {
display: none
}
}
demo中我额外添加了isEdit(控制el-table的class：tb-edit / tb-show)来控制表格的 只读/编辑 模式。以及输入数值之后的扩展方法 handleInputBlurResult 根据输入成绩值设置评级。
当然不局限于使用input做文本编辑，还可以添加各种其他控件进行赋值操作，关键点在于设置控件的显隐。
337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
