使用npm安装vue-easytable

npm install --save vue-easytable

在 main.js 中写入以下内容：

// 引入样式import "vue-easytable/libs/theme-default/index.css";// 引入组件库import VueEasytable from "vue-easytable";Vue.use(VueEasytable);// 引入中文文语言包import { VeLocale } from "vue-easytable";import zhCN from "vue-easytable/libs/locale/lang/zh-CN.js";VeLocale.use(zhCN);

代码实现

const COLUMN_KEYS = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];export default {data() {return {startRowIndex: 0,// 是否开启列宽可变columnWidthResizeOption: {enable: true,},// 虚拟滚动配置virtualScrollOption: {enable: true,scrolling: this.scrolling,},// 单元格自动填充配置cellAutofillOption: {directionX: true,directionY: true,},// 单元格编辑配置editOption: {afterCellValueChange: ({ row, column, changeValue }) => {console.log(row, column, changeValue);console.log(this.tableData);},},// header 右键菜单配置contextmenuHeaderOption: {contextmenus: [{type: "CUT",},{type: "COPY",},{type: "EMPTY_COLUMN",},],},// body 右键菜单配置contextmenuBodyOption: {contextmenus: [{type: "CUT",},{type: "COPY",},{type: "SEPARATOR",},{type: "INSERT_ROW_ABOVE",},{type: "INSERT_ROW_BELOW",},{type: "SEPARATOR",},{type: "REMOVE_ROW",},{type: "EMPTY_ROW",},{type: "EMPTY_CELL",},],},// 行样式配置rowStyleOption: {clickHighlight: false,hoverHighlight: false,},tableData: [],};},computed: {columns() {let columns = [{field: "index",key: "index",operationColumn: true,title: "",width: 55,fixed: "left",renderBodyCell: this.renderRowIndex,},];columns = columns.concat(COLUMN_KEYS.map((keyValue) => {return {title: keyValue,field: keyValue,key: keyValue,width: 90,edit: true,};}));return columns;},},methods: {renderRowIndex({ row, column, rowIndex }) {return {rowIndex + this.startRowIndex + 1};},scrolling({startRowIndex,visibleStartIndex,visibleEndIndex,visibleAboveCount,visibleBelowCount,}) {this.startRowIndex = startRowIndex;},// 初始化表格initTableData() {let tableData = [];for (let i = 0; i  {dataItem[keyValue] = "";});if (i === 1 || i === 3) {dataItem["C"] = "YOU";dataItem["D"] = "CAN";dataItem["E"] = "TRY";dataItem["F"] = "ENTER";dataItem["G"] = "SOME";dataItem["H"] = "WORDS";dataItem["I"] = "!!!";}tableData.push(dataItem);}this.tableData = tableData;},},created() {this.initTableData();},};.spreadsheet {padding: 0 10px;margin: 20px 0;}

效果

表格配置

参数说明类型可选值默认值
tableData表格数据Array––
footerData表格footer 汇总数据，数据结构和 tableData 一致Array––
columns列配置，具体项见下表 columns 配置Array––
showHeader是否展示表头Boolean–true
fixedHeader是否固定表头，默认启用。需要和 `maxHeight`结合使用Boolean–true
fixedFooter是否固定footer 汇总，默认启用。需要和 `maxHeight`结合使用Boolean–true
scrollWidth表格滚动区域的宽（开始出滚动条的宽度）。Number指定像素；String指定百分比Number、String––
maxHeight表格的最大高度。Number指定像素；String指定百分比。用于“固定头”或“虚拟滚动”功能Number、String––
rowKeyFieldName指定 row key 的字段名称。用于行展开、行单选、行多选、行点击高亮、虚拟滚动String––
borderAround是否展示表格外边框Boolean–true
borderX是否展示列横向边框Boolean–true
borderY是否展示列纵向边框Boolean–false
cellSpanOption单元格合并配置，具体见下表 cellSpanOption 配置Object––
columnHiddenOption列隐藏配置，具体见下表 columnHiddenOption 配置Object––
cellStyleOption单元格样式配置，具体见下表 cellStyleOption 配置Object––
rowStyleOption行样式配置，具体见下表 rowStyleOption 配置Object––
expandOption行展开配置，具体见下表 expandOption 配置Object––
checkboxOption行多选配置，具体见下表 checkboxOption 配置Object––
radioOption行单选配置，具体见下表 radioOption 配置Object––
virtualScrollOption虚拟滚动配置，建议需要一次性展示1000条以上使用。具体见下表 virtualScrollOption 配置。Object––
sortOption排序配置，具体见下表 sortOption 配置Object––
cellSelectionOption单元格选择配置，具体见下表 cellSelectionOption 配置Object––
editOption单元格编辑配置，具体见下表 editOption 配置Object––
contextmenuHeaderOption表格 header 右键菜单配置，具体见下表 contextmenuHeaderOption 配置Object––
contextmenuBodyOption表格 body 右键菜单配置，具体见下表 contextmenuBodyOption 配置Object––
eventCustomOption自定义事件配置，具体见下表 eventCustomOption 配置Object––
cellAutofillOption单元格自动填充配置，具体见下表 cellAutofillOption 配置Object––
clipboardOption单元格剪贴板配置，具体见下表 clipboardOption 配置Object––