需要实现表格列宽度调整,选择展示表格字段,以及显示顺序,先看效果,每次变动后保存到本地缓存中,也可以与后台配合保存到数据库,实现用户自定义表格.

1.安装vuedraggable实现拖拽

npm i vuedraggable

2.新建组件 FilterColumns.vue

我这里默认把操作列放到最后一个并且不允许编辑,如不需要可删除

3.在main.js中注册成全局组件

import FilterColumns from '@/views/my-components/FilterColumns'
Vue.component('filterColumns', FilterColumns);

4.使用方法

在合适位置(一般搜索按钮后,会显示筛选按钮)引入组件