function createTableSelectionPanelopenAPI IOpenAPI const tablePanelContainer = documentcreateElementdiv; tablePanelContainerclassListadd$CLASS_PREFIX-toolbar-table__collapse; tablePanelContainerin

<template>
  <div class="table-selection-panel">
    <div class="table-title">
      <span class="table-select">{{ tableTitle }}</span>
      <span>表格</span>
    </div>
    <div class="table-panel">
      <table>
        <tbody>
          <tr v-for="(row, rowIndex) in tableElementList" :key="rowIndex">
            <td v-for="(cell, colIndex) in row" :key="colIndex" @mouseover="hoverTableCell(rowIndex, colIndex)" @click="insertTable(rowIndex, colIndex)"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableTitle: '插入',
      tableElementList: [],
      colIndex: 0,
      rowIndex: 0,
    };
  },
  mounted() {
    this.drawTable();
  },
  methods: {
    drawTable() {
      const rows = 10;
      const cols = 10;
      const tableElementList = [];
      for (let i = 0; i < rows; i++) {
        const row = [];
        for (let j = 0; j < cols; j++) {
          row.push({});
        }
        tableElementList.push(row);
      }
      this.tableElementList = tableElementList;
    },
    hoverTableCell(rowIndex, colIndex) {
      this.colIndex = colIndex + 1;
      this.rowIndex = rowIndex + 1;
      this.tableElementList.forEach((row, index) => {
        row.forEach((cell, cellIndex) => {
          if (cellIndex < this.colIndex && index < this.rowIndex) {
            cell.active = true;
          } else {
            cell.active = false;
          }
        });
      });
      this.tableTitle = `${this.rowIndex}×${this.colIndex}`;
    },
    insertTable(rowIndex, colIndex) {
      this.openAPI.getTableAPI().insertTable(Number(rowIndex), Number(colIndex));
      this.recoveryTable();
    },
    recoveryTable() {
      this.tableElementList.forEach((row) => {
        row.forEach((cell) => {
          cell.active = false;
        });
      });
      this.tableTitle = '插入';
      this.colIndex = 0;
      this.rowIndex = 0;
    },
  },
};
</script>
<style scoped>
.table-selection-panel {
  display: block;
}

.table-title {
  font-weight: bold;
}

.table-panel {
  margin-top: 10px;
}

.table-panel table {
  border-collapse: collapse;
}

.table-panel table td {
  width: 16px;
  height: 16px;
  border: 1px solid #000;
}

.table-panel table td.active {
  background-color: #ccc;
}
</style