前端表格组件大概是PC端使用频率最高的组件，也是最让产品经理头疼的组件（一般也是处理UE、EX）。幸灾乐祸，经过多年的努力，表格组件成为了圈内唯一一个我敢用精通来形容的技术点。产品经理天马行空，天马行空。虽然很少有人把products当做manager，但是ProductManager从字面翻译过来好像真的是这个意思。产品递给我一份需求文档，随口说了句三顿：“加个新列表搜索，很简单，明天能上传吗？”我拿起沾了污渍的咖啡杯，深深地品了一口。一口。如果你只是认为我口渴，那是肤浅的。要知道口也是栈结构。在我喝完这一口咖啡之前，我不会同意明天上网。这是程序员最后的倔强。但是同意后没几分钟就后悔了，因为不到一屏的需求文档有一大半是关于表格的交互描述：列的宽度可以调整，列的顺序列可以调整。列可以配置为显示和隐藏用户刷新最后，必须保持宽度、顺序和显示状态。支持右键下载。支持复制单元格内容。可以打印当前页行数据，上下移动（这个时候不需要）。看上次的表交互，这次不需要了。我很感动。不敢动。表格组件很容易处理。该产品已虐待我数千次。我像对待初恋一样对待产品。首先，这是一个Vue项目，所以先引入gridmanager-vue，完成基础配置。//vue模板//vuejsimportGridManagerfrom'gridmanager-vue';import'gridmanager-vue/css/gm-vue.css';Vue.使用（网格管理器）；constapp=newVue({el:'#app',data:{tableOption:{gridManagerName:'table-key',//必需，全局唯一columnData:[{key:'pic',text:'thumbnail'},{key:'title',text:'title'},//....其他列信息]}}});基础工作完成后，可以通过配置tableOption来实现产品经理需要的功能。列的宽度可以调整APItableOption:{supportAdjust:true,//默认启用//...其他配置}列的顺序可以调整APItableOption:{supportDrag:true,//默认启用//...其他配置}columns可以配置显示和隐藏APItableOption:{supportConfig:false,//默认开启configInfo:'Configurationcolumndisplaystatus',//配置区的描述信息//...其他配置items}用户刷新后，宽度，顺序，显示状态保持APItableOption:{disableCache:false,//默认禁用记忆功能//...其他配置项}支持右键下载APItableOption:{supportExport:true,//默认开启exportConfig:{//导出方式：默认为static//1.static：前端静态导出，后端不需要提供接口。这种方法导出的文件并不完美。//2.blob:通过后端接口返回二进制流。`nodejs`可以使用`js-xlsx`，`java`可以使用`org.apache.poi`生成二进制流。//3.url:下载地址由配置或后台返回mode:'static',//导出的文件名，字符串或函数类型，为a时需要返回字符串功能。字符串不包含后缀名，如果不设置该值，默认使用gridManagerName//参数query为当前查询的参数fileName:(query)=>{return'下载的文件名';},//导出的后缀名,Optional['xls','csv'],默认为`xls`suffix:'xls',//导出处理器函数,mode==='static时可选配置此项',其他模式必须配置//fileName:导出文件名//query:查询参数//pageData:分页数据//sortData:排序数据//selectedList:当前选中的数据//tableData:当前页面数据handler:(fileName,query,pageData,sortData,selectedList,tableData)=>{//mode==='static':handler函数返回一个二维数组，如果数组返回不正确，使用当前DOM导出//return[["title","content","createData"],["typescript","thisistypescript","2015-01-01"]]//mode==='blob':处理函数需要returnthepromiseofresolve(blob)//需要在promise中传递promiseresolve()返回一个二进制流（blob），有两种返回格式：//1.returnnewPromise(resolve=>{resolve(blob))});//2.returnnewPromise(resolve=>{resolve({data:blob})});//模式==='url':handler函数需要返回url或者returnresolve(url)promise//1.return'xxx.xxx.com/xxx.xls';//2.returnnewPromise(resolve=>{resolve('xxx.xxx.com/xxx.xls')})}},//...其他配置项}支持复制单元格内容APItableOption:{useCellFocus:true,//...其他配置项}打印当前页面APItableOption:{supportPrint:true.//...其他配置项}行数据可以上下移动APItableOption:{supportMoveRow:true,moveRowConfig:{//指定移动后需要更新的字段。如果不配置该字段，则只更新DOMkey:'priority',//单列移动模式：为true时会生成一个单独的列useSingleMode:false,//固定列：仅在单列时有效-columnmobilemode，如果右边有固定的column，则column必须配置为leftfixed:undefined,//移动后执行的程序，可以在其中完成与后台的交互handler:(list,tableData)=>{console.log(list,tableData);}},//...其他配置项}About框架真是可惜了。我使用React框架是一个巧合。GridManager不仅有gridmanager-vue，还有gridmanager-react，gridmanager-angular-1.x。即使当前项目是一个古老的项目，也可以直接使用支持jQuery的原生js版gridmanager。另外，这只是GridManager的一部分功能。此外，还有固定表头、固定列、国际化、表头过滤等常用表格功能。喜欢就给gridmanager一个star吧。
