欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

左键双击 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%);'
     }
},