当前位置: 首页 > Web前端 > vue.js

Table组件GridManager固定列详解

时间:2023-03-31 18:05:10 vue.js

2019年初开始,想加入固定列功能。但是因为是源码,需要支持框架的引用,调试调试,空出一个固定的分支。今年受疫情影响,周维的时间很多。于是去年没有完成的固定栏目功能就实现了。如何使用用户配置的列,配置起来相当简单。不需要单独维护一列,只需要在配置项中的columnData中添加fixed属性即可。fixed属性默认值未定义,接收两个值:'left','right':left:固定在左边right:固定在右边注意事项:虽然可以设置最左边的列为'right'',但这很奇怪,不建议大家这样使用。如您所见,这是一个不需要您做太多事情的示例:document.querySelector('#table-demo-fixedCode')。GM({gridManagerName:'demo-fixedCode',ajaxData:'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList',ajaxType:'POST',supportAjaxPage:true,supportAdjust:false,supportDrag:false,columnData:[{key:'name',text:'name',width:'200px'},{key:'info',text:'description',width:'500px'},{key:'url',text:'url',width:'500px'},{key:'action',text:'operation',width:'100px',fixed:'right',template:(action,row)=>{return'查看';}}]});组件GridManager自动添加的列提供了选择列和序号列的功能,这些列应该如何配置固定的列属性呢?在组件初始化时的参数中,为选择栏和序号栏提供了配置参数。对应:选择列:checkboxConfig序号:autoOrderConfig我们只需要在初始化时配置这两个参数,指定fixed属性即可实现固定列效果document.querySelector('#table-demo-fixedCode').GM({checkboxConfig:{fixed:'left'},autoOrderConfig:{fixed:'left'},//...其他配置项});效果展示:fixed-demo关于框架上面的demo是原生的JS编码方式,在各个框架中的用法和Native一样。在框架中使用时,需要安装对应的框架版本:GridManager@2.11.0gridmanager-angular-1.x@1.4.0gridmanager-vue@1.4.0gridmanager-react@0.4.0如果对你有帮助,请到Github点个星。