vue自定义表格列的实现过程记录 vue自定义表格列的实现过程记

前言
效果图
setTable组件
使用
结束语

前言在我们开发PC端的项目使用表单时，尤其是crm系统，应该经常会遇到这样的需求，用户需要根据设置来自定义显示列。查了element的官方文档，并没有此类组件，所以手动封装了一个简单的组件，希望能在大家开发此类需求时能够有所帮助。

效果图
具体效果图如下：
自定义显示列(可实现拖拽进行排序，点击选中，再次点击取消选中)

文章图片

按照用户已设置好的字段排序/显示/隐藏每一列

文章图片

setTable组件
首先实现拖拽排序的话我们需要借助一个插件：

npm install vuedraggable -S

具体的组件代码如下，代码内已写有详细的注释，在这里就不过多赘述了。。
setTable.vue

/* 全部菜单 */.menus-container {margin-top: 20px; .menus-content {.item {color: #575757; background: rgba(238, 238, 238, 1); border: 1px solid rgba(220, 220, 220, 1); border-radius: 2px 0px 0px 2px; }}}/* 菜单通用样式 */.menus-box {.menus-title {margin-top: 10px; line-height: 32px; }.menus-content {display: flex; flex-wrap: wrap; .item {cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 8px; margin: 10px; border-radius: 3px; }.active {color: #fff; background: rgba(72, 153, 229, 1); border-radius: 2px 0px 0px 2px; }}}/* 已选菜单 */.select-menus {.menus-content {.item {margin: 0px; border-radius: 0; background: rgba(255, 255, 255, 1); border: 1px solid rgba(220, 220, 220, 1); }}}

使用
具体使用如下, 在这里已经隐去不必要的业务代码，只把最核心实现的代码贴了出来，以免对大家产生误导..

在这里其实也可以设置成固定的列宽或者通过服务器返回具体的尺寸，这样的话就不用写这么多的if语句了，会更加方便简洁..

结束语
其实刚接到这个需求时，感觉挺复杂的, 尤其是需要进行拖动，还要根据服务器返回不同的字段来进行表单列的排序。但整体做下来并没有我想象的那么麻烦。大家在遇到需求时，也一定不要一直想的太多，一定要先去尝试，说不定它并没有你想的那么难..
【vue自定义表格列的实现过程记录】到此这篇关于vue自定义表格列的文章就介绍到这了,更多相关vue自定义表格列内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！