elementui 弹窗 显示详细信息_ElementUI中el-table双击单元格事件并获取指定列的值和弹窗显示详细信息...

场景

双击el-table的某个单元格时获取此单元格的信息并弹窗显示其他关联的信息。

效果如下

注：

实现

首先给el-table设置cell-dblclick事件

v-loading="loading":data="kqryszList"@selection-change="handleSelectionChange"@cell-dblclick="bccelldblclick"

ref="tb"

>

在事件对应的方法中接收四个参数

//班次单元格双击

bccelldblclick(row, column, cell, event) {//双击的是班次单元格

if (column.property == "bc") {this.bcxxopen = true;

}

}//双击的是班次组单元格

if (column.property == "bcz") {this.bczxxopen = true;

}

}

},

这里用到了行对象和列对象以及单元格对应。

上面设置的单元格双击事件是对所有的单元格双击都生效。

如果只是想对某一列的单元格双击进行生效的话，可以通过

if (column.p