Vue 表格选择组件：鼠标自由选择行列

<template>
  <div ref="tablePanelContainer" class="toolbar-table__collapse">
    <div class="table-title">
      <span class="table-select">{{ tableTitle }}</span>
      <span>表格</span>
    </div>
    <div ref="tablePanel" class="table-panel"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableTitle: '插入',
      tableElementList: [],
      colIndex: 0,
      rowIndex: 0
    };
  },
  mounted() {
    this.createTableSelectionPanel();
  },
  methods: {
    createTableSelectionPanel() {
      const tablePanelContainer = this.$refs.tablePanelContainer;
      const tableTitleSelect = tablePanelContainer.querySelector('.table-title > .table-select');
      const tablePanel = this.$refs.tablePanel;

      tablePanelContainer.style.display = 'block';

      // 绘制行列
      for (let i = 0; i < 10; i++) {
        const tr = document.createElement('tr');
        tr.classList.add('table-row');
        const trCellList = [];
        for (let j = 0; j < 10; j++) {
          const td = document.createElement('td');
          td.classList.add('table-col');
          tr.append(td);
          trCellList.push(td);
        }
        this.tableElementList.push(trCellList);
        tablePanel.append(tr);
      }

      tablePanel.onmousemove = (evt) => {
        const celSize = 16;
        const rowMarginTop = 10;
        const celMarginRight = 6;
        const { offsetX, offsetY } = evt;
        this.removeAllTableCellSelect();
        this.colIndex = Math.ceil(offsetX / (celSize + celMarginRight)) || 1;
        this.rowIndex = Math.ceil(offsetY / (celSize + rowMarginTop)) || 1;

        this.tableElementList.forEach((tr, trIndex) => {
          tr.forEach((td, tdIndex) => {
            if (tdIndex < this.colIndex && trIndex < this.rowIndex) {
              td.classList.add('active');
            }
          });
        });

        this.setTableTitleSelect(`${this.rowIndex}×${this.colIndex}`);
      };

      tablePanel.onmouseleave = () => {
        this.recoveryTable();
      };

      tablePanel.onclick = () => {
        this.insertTable();
        this.recoveryTable();
      };
    },
    removeAllTableCellSelect() {
      this.tableElementList.forEach((tr) => {
        tr.forEach((td) => td.classList.remove('active'));
      });
    },
    setTableTitleSelect(payload) {
      this.tableTitle = payload;
    },
    recoveryTable() {
      this.removeAllTableCellSelect();
      this.setTableTitleSelect('插入');
      this.colIndex = 0;
      this.rowIndex = 0;
    },
    insertTable() {
      this.$emit('insert-table', {
        rowIndex: Number(this.rowIndex),
        colIndex: Number(this.colIndex)
      });
    }
  }
};
</script>
<style scoped>
.toolbar-table__collapse {
  /* Your styles for the container element */
}

.table-title {
  /* Your styles for the table title element */
}

.table-panel {
  /* Your styles for the table panel element */
}

.table-row {
  /* Your styles for the table row element */
}

.table-col {
  /* Your styles for the table column element */
}

.active {
  /* Your styles for the active state */
}
</style>