注册企业的步骤,顺德网站优化公司,有网站的源代码怎么生成网站,公司部门工作总结今天有个新需求#xff0c;点击table行#xff0c;执行一些操作。实现过程中遇到了#xff1a;点击操作列、操作列内按钮会冒泡触发行点击。antd版本#xff1a;1.7.8 一、解决方案 customRow a-table :customRowhandleClickRow :data-sourcedata_li… 今天有个新需求点击table行执行一些操作。实现过程中遇到了点击操作列、操作列内按钮会冒泡触发行点击。antd版本1.7.8 一、解决方案 customRow a-table :customRowhandleClickRow :data-sourcedata_list :columnscolumns bordered rowKeyid :scroll{x:true}template slotoperation slot-scopetext, recorddiva click.stophandleAdd(edit, record) //阻止冒泡a-icon typeedit /编辑/aa-popconfirm title确认删除吗? confirmonDelete(record)a click.stopa-icon typedelete /删除/a/a-popconfirma click.stophandleAdd(look, record)a-icon typeeye /查看/a/div/template
/a-table
methods: {//行点击handleClickRow(record, index){return {on: {click: () { //行单击console.log(record, index)}}}},
} 事件汇总 1、click 行单击 2、dblclick 行双击 3、contextmenu 右键菜单 4、mouseenter 鼠标移入 5、mouseleave 鼠标移出 事件冒泡 上面解决方案的bug是点击操作栏、操作栏内的按钮都会触发事件冒泡致行点击。所以我在每一个按钮的点击事件上都加了阻止事件冒泡 .stop。 还有一点值得注意的是 popconfirm 组件默认点击 删除按钮会弹框所以我加了 click.stop 。 以上的解决方案可以正常点击操作栏按钮点击操作栏仍会触发行点击事件如果觉得没有影响就可以到此为止。如果想要点击操作栏不触发行点击解决方案在下方。 二、如何点击操作栏不触发行点击
固定列 fixed: true
//行点击handleClickRow(record, index){return {on: {click: (event) {const rowElement event.target.closest(tr);const lastCellElement rowElement.lastElementChild;const clickedCellElement event.target.closest(td);const isLastColumn clickedCellElement lastCellElement;if (!isLastColumn) { //当点击表格最后一列时不触发行点击console.log(recore, index)}}}}},
不固定列 //行点击handleClickRow(record, index){return {on: {click: (event) {const lastColumnIndex this.columns.length - 1;const isLastColumn event.target.cellIndex lastColumnIndex;if (!isLastColumn) {this.handleAdd(look, record) }}}}},
以上。
如果我的博客解决了您的问题欢迎评论、点赞、关注一起讨论
