vue如何实现点击spreadjs的excel弹出列

首先，需要在Vue项目中引入SpreadJS组件。然后，在Vue组件中使用SpreadJS的API来实现点击excel弹出列的功能。

以下是一个简单的示例代码：

<template>
  <div>
    <gc-spread-sheets :options="options" ref="spreadsheet"></gc-spread-sheets>
  </div>
</template>

<script>
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
import * as GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-context-menu";
import "@grapecity/spread-sheets-pop-menu";
import "@grapecity/spread-sheets-resize";

export default {
  name: "SpreadSheet",
  data() {
    return {
      options: {
        allowUserZoom: true,
        allowUserResize: true,
        allowContextMenu: true,
        allowFormulaRangeSelection: true,
        allowExtendPasteRange: true,
        showVerticalScrollbar: true,
        showHorizontalScrollbar: true,
        tabStripVisible: true,
        newTabVisible: true,
        sheets: [
          {
            name: "Sheet1",
            rowCount: 100,
            columnCount: 26,
          },
        ],
      },
    };
  },
  mounted() {
    this.$refs.spreadsheet.spread.addEventListener(
      GC.Spread.Sheets.Events.CellClick,
      this.onCellClick
    );
  },
  methods: {
    onCellClick(sender, e) {
      const sheet = sender.getActiveSheet();
      const colIndex = e.col;
      const rowIndex = e.row;

      // 判断是否点击了列头
      if (rowIndex < sheet.frozenRowCount()) {
        // 获取列宽
        const colWidth = sheet.getColumnWidth(colIndex);
        console.log(`列${colIndex}的宽度为${colWidth}`);
      }
    },
  },
};
</script>

以上代码中，SpreadJS的`CellClick`事件被绑定到了Vue组件的`onCellClick`方法上。在`onCellClick`方法中，通过判断点击的行号是否小于冻结行数，就可以判断是否点击了列头。如果是点击了列头，就可以通过`getColumnWidth`方法获取列宽。你可以在这个方法中弹出一个对话框或者菜单来显示列宽。

需要注意的是，以上代码仅供参考。具体实现方式可能因为SpreadJS版本不同而有所不同，你需要根据自己的情况进行调整。