新建文本文档-CSDN博客

本文链接：https://blog.csdn.net/vvddkkk/article/details/130506038

vue2结合Element实现鼠标拖动框选el-table

模板部分

<template>
  <div class="main">
    <el-table
      :data="tableData"
      @mousedown.native="down($event)"
      style="width: 100%"
      ref="box"
      @mousemove.native="move($event)"
      @mouseup.native="up($event)">
      <el-table-column prop="date" label="日期" width="150"> </el-table-column>
      <el-table-column label="配送信息">
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column label="地址">
          <el-table-column prop="province" label="省份" width="120">
          </el-table-column>
          <el-table-column prop="city" label="市区" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="300">
          </el-table-column>
          <el-table-column prop="zip" label="邮编" width="120">
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

js部分

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],
      // 是否需要(允许)处理鼠标的移动事件,默认识不处理
      select: false,
      // 定义移动元素div
      rect: null,
      // 记录鼠标按下时的坐标
      downX: 0,
      downY: 0,
      // 记录鼠标抬起时候的坐标
      mouseX2: this.downX,
      mouseY2: this.downY,
      // 表格dom元素
      TableDom:null,

    };
  },
  mounted() {},
  methods: {
    down(event) {
      // 鼠标按下时才允许处理鼠标的移动事件
      this.select = true;
      this.rect = document.createElement("div");
      // 框选div 样式
      this.rect.style.cssText =
        "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px solid #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;";
      this.rect.id = "selectDiv";
      // 添加到lay1下
      this.TableDom = document.querySelector(".el-table");
      // console.log(event);
      this.TableDom.appendChild(this.rect);
      // 取得鼠标按下时的坐标位置
      this.downX = event.x || event.clientX;
      this.downY = event.y || event.clientY;
      this.rect.style.left = this.downX + "px";
      this.rect.style.top = this.downY + "px";
      //设置你要画的矩形框的起点位置
      this.rect.style.left = this.downX;
      this.rect.style.top = this.downY;
    },
    move(event) {
      /*
      这个部分,根据你鼠标按下的位置,和你拉框时鼠标松开的位置关系,可以把区域分为四个部分,根据四个部分的不同,
      我们可以分别来画框,否则的话,就只能向一个方向画框,也就是点的右下方画框.
      */
      if (this.select) {
        // 取得鼠标移动时的坐标位置
        this.mouseX2 = event.clientX;
        this.mouseY2 = event.clientY;
        // 显示框选元素
        if (this.rect.style.display == "none") {
          this.rect.style.display = "";
        }
        this.rect.style.left = Math.min(this.mouseX2, this.downX) + "px";

        this.rect.style.top = Math.min(this.mouseY2, this.downY) + "px";

        this.rect.style.width = Math.abs(this.mouseX2 - this.downX) + "px";

        this.rect.style.height = Math.abs(this.mouseY2 - this.downY) + "px";
        // A part
        if (this.mouseX2 < this.downX && this.mouseY2 < this.downY) {
          this.rect.style.left = mouseX2;
          this.rect.style.top = mouseY2;
        }

        // B part
        if (this.mouseX2 > this.downX && this.mouseY2 < this.downY) {
          this.rect.style.left = this.downX;
          this.rect.style.top = this.mouseY2;
        }

        // C part
        if (this.mouseX2 < this.downX && this.mouseY2 > this.downY) {
          this.rect.style.left = this.mouseX2;
          this.rect.style.top = this.downY;
        }

        // D part
        if (this.mouseX2 > this.downX && this.mouseY2 > this.downY) {
          this.rect.style.left = this.downX;
          this.rect.style.top = this.downY;
        }
      }
    },
    //鼠标抬起事件
    up(event) {
      var a = document.querySelector(".el-table__body");
      // console.log(a.children[1].childNodes);
      a.children[1].childNodes.forEach((element) => {
        for (let index = 0; index < element.childNodes.length; index++) {
          const a = element.childNodes[index];
           // 判断是否款选中
          if (
            this.rect.offsetLeft < a.offsetLeft + a.offsetWidth &&
            this.rect.offsetLeft + this.rect.offsetWidth > a.offsetLeft &&
            this.rect.offsetTop < a.offsetTop + a.offsetHeight &&
            this.rect.offsetTop + this.rect.offsetHeight > a.offsetTop
          ) {
            if (a.className.indexOf("add") == -1) {
              // 选中加样式
              a.style.border = "1px solid red"
            }
          } else {
            a.style.border ==''
          }
        }
      });
      //       //将已选中的样式改变
      //       if (lis[i].className.indexOf("seled") == -1) {
      //         lis[i].className = lis[i].className + " seled";
      //       }

      //     } else {
      //       //如果没有选中则清除样式
      //       if (lis[i].className.indexOf("seled") != -1) {
      //           lis[i].className = "listItem";
      //       }
      //     }
      //   }
      //鼠标抬起,就不允许在处理鼠标移动事件
      this.select = false;
      //隐藏图层
      if (this.rect) {
       this.TableDom.removeChild(this.rect);
      }
    },
  },
};
</script>