左键双击 el-table 单元格可编辑内容(在输入框中输入公式可直接得出结果),右键单击可显示操作菜单,可以编辑单元格高亮显示-js 代码
最编程
2024-03-18 10:46:54
...
// 左键单击事件
clickTableRow(row, column, event) {
var menu = document.querySelector("#menu");
menu.style.display = "none";
},
// 右键单击
rightClick(row, column, event) {
this.currentRow = row //存储当前选中的行
var menu = document.querySelector("#menu"); //展示操作菜单
event.preventDefault();
// 页面只读的时候不展示
if (this.isRead) {
menu.style.display = "none";
return
}
// 根据事件对象中鼠标点击的位置,进行定位
menu.style.left = event.clientX + "px";
menu.style.top = event.clientY + "px";
// 改变自定义菜单的隐藏与显示
menu.style.display = "block";
this.setCurrent(row);
},
setCurrent(row) {
this.$refs.singleTable.setCurrentRow(row);
},
// 展示菜单子级
showChild() {
this.$refs.menu1.style.backgroundColor = '#ecf5ff'
this.$refs.childMenu1.style.display = 'block'
},
// 隐藏菜单子级
hideChild() {
this.$refs.menu1.style.backgroundColor = '#fff'
this.$refs.childMenu1.style.display = 'none'
},
// 双击单元格
doubleClickTop(row, column) {
// 页面只读时不触发
if (this.isRead) {
return
}
// 避免点击过快导致多个输入框处于焦点状态
this.$set(row,column.property + 'Show',false)
this.$set(row,column.property + 'Show',true)
},
// 输入框鼠标失焦或者键盘回车时触发
onBlur(row, column) {
this.$set(row,column.property + 'Show',false)
// 请求后台更改数据
this.getDetailsList(row)
},
// 根据输入的公式计算出结果(引入main.js工具库)
calculate() {
try {
this.result = this.mathjs.evaluate(输入框绑定的值);
} catch (error) {
this.result = '无效的表达式';
}
},
// 高亮可编辑单元格
columnbackgroundStyle({ row, column, rowIndex, columnIndex }){
if (this.isRead) {
return
}
var columnList=['name']
if (columnList.indexOf(column.property)>-1) {
return 'background:rgb(249 239 72 / 16%);'
}
},