给antdv 1.78 Vue2版本的a-table增加显示隐藏列和列宽调整还有列位置拖动功能并将数据永久保存在后端

列位置拖动功能需要安装插件draggable,并在页面中引入。

//npm方式安装
npm i -S vuedraggable

//或使用yarn安装
yarn add vuedraggable

其他的废话不说直接上代码:

HTML部分:

JS部分:

后端接口的逻辑为:一个tableId字段用于区分table,一个hiddenColumns字段为JSON格式化后的前端列数据,一个userId字段用于区分用户(从token里取),新增编辑使用同一接口,如果tableId不存在则为新增,否则为编辑。

CSS部分:


你可能感兴趣的:(前端,javascript,前端,html)