【Antd-Vue】实现Table组件行点击,解决某一列不触发行点击

104 阅读1分钟
  1. 记录项目antd-vue版本1.7.8
  2. 个人笔记记录

image.png

image.png

    //##### 固定列 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) 
            }
          }
        }
      }
    },

原文链接 blog.csdn.net/meichaoWen/…