vue中实现el-table点选和鼠标框选功能

vue中实现el-table点选和鼠标框选功能_第1张图片

 

实现思路: 项目有两个需求,既能在el-table实现点选又能实现鼠标框选

一. 点选实现思路: 使用el-table的cellClick方法,

        1.直接给点击的cell添加类名,cell.classList.add("blue-cell");然后把获取的数据存入数组,

           设置样式:

::v-deep .el-table td.blue-cell {
  border: 1px solid blue !important;
}

     方法2.如果不添加类名,可以在cellStyle方法里通过存储的数组添加边框,如果是普通滚动可以使用行索引,如果是虚拟滚动,这里需要使用id更为准确

cellStyle({ row, column, rowIndex, columnIndex }) {
      // 对xqArr选择选区的单元格加蓝边框
      let matchObj = this.xqArr.find(
        item =>
          item.column === column.index &&
          // item.row === row.index &&
          item.rowId === row.id &&
          item.sampleTime === row.sampleTime
      );
      if (matchObj) {
        return { border: "1px solid #5E99FD" };
      }
}

二.鼠标框选实现思路: 利用鼠标按下和抬起事件,计算框的范围,框住的cell可以通过类名添加边框或者依然通过数组形式. 需要注意的是因为el-table在页面的右下方,并且数据量大,可以滚动,所以需要在计算距离的时候需要减去容器偏移的距离和滚动的高度.

              


                    
                    

你可能感兴趣的:(JS,vue,web前端,vue.js,elementui,javascript)