使用element-ui写一个竖排显示的菜单包括一个插入表格的菜单项插入表格的菜单项弹出一个面板该面板中有一个10行10列的表格可用鼠标滑动选择任意m行n列的表格

以下是使用element-ui编写的竖排菜单，以及插入表格的菜单项和弹出的面板：

<template>
  <div>
    <el-menu default-active="1" mode="vertical">
      <el-submenu index="1">
        <template slot="title">菜单</template>
        <el-menu-item index="1-1">菜单项1</el-menu-item>
        <el-menu-item index="1-2">菜单项2</el-menu-item>
        <el-menu-item index="1-3">菜单项3</el-menu-item>
        <el-submenu index="1-4">
          <template slot="title">插入表格</template>
          <el-menu-item index="1-4-1" @click="showTablePanel">打开表格面板</el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
    <el-dialog title="表格面板" :visible.sync="tablePanelVisible" width="50%">
      <el-table :data="tableData" :row-key="row => row.id" @row-click="selectRow">
        <el-table-column v-for="column in columns" :key="column.prop" :label="column.label" :prop="column.prop">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tablePanelVisible: false,
      tableData: [],
      columns: [
        { label: '列1', prop: 'col1' },
        { label: '列2', prop: 'col2' },
        // 其他列...
      ],
      selectedRows: []
    };
  },
  methods: {
    showTablePanel() {
      this.tablePanelVisible = true;
    },
    selectRow(row) {
      // 处理选中行的逻辑
      console.log(row);
    }
  },
  mounted() {
    // 初始化表格数据
    for (let i = 0; i < 10; i++) {
      let rowData = {};
      for (let j = 0; j < 10; j++) {
        rowData[`col${j + 1}`] = `行${i + 1}列${j + 1}`;
      }
      this.tableData.push(rowData);
    }
  }
};
</script>

在上述代码中，使用了el-menu组件来创建竖排菜单。el-submenu用于创建子菜单，el-menu-item用于创建菜单项。插入表格的菜单项使用了el-submenu，并在其下添加了一个点击事件@click="showTablePanel"，用于打开表格面板。

表格面板使用了el-dialog组件来创建弹出面板，其中包含一个el-table组件来展示表格数据。el-table-column用于定义表格的列。

在mounted钩子函数中，初始化了一个10行10列的表格数据。在selectRow方法中，可以处理选中行的逻辑