拖拽的方式使用qbuttongroup_拖拽功能总结

1. 表格自适应问题

通常需要给自适应表格外层添加一个类名 .table-container 的标签

https://www.jianshu.com/p/1ad07fc0fc3f

https://www.jianshu.com/p/88504a38d37b

1. 如何解决自适应表格内容过多将布局支撑乱了的情况

给 table 标签加上如下 css 声明，table-layout 作用就是让表格布局固定，使得表格的宽度不会根据内容多少而动态变化

1. td 不用设置 height

单元格内容太多，会出现内容折行限制，将 td 撑篙，所有设置 height 没有意义

如何设置初始高度

设置 td 初始高度最好用 padding 进行设置，考虑到了单元格被撑开的情况

表格边框问题

给 th td 都设置 border 后会出现如下情形

如何让表格的边框重叠

border-collapse 可以让单元格的之间共享边框

border-spacing 消除单元格之间的间距

如何使用伪元素实现表格流式布局

伪元素 :before 和 :after 它们有一个功能是将元素属性值显示到HTML内容里，content: attr(data-label)，放在before/after伪元素类里。我们就能够让table在PC端表现成网格效果，而在小屏的手机端表现成流式布局

我们以600px为小屏幕大屏幕的分界点，下面的CSS使用媒体查询语句，在小于600px宽的屏幕上，用CSS将td上的属性值取出来，放到内容区显示

拖拽问题

1. 第一种解决方案 原生 table + 原生拖拽
2. 第二种解决方案 原生 table + sortablejs

第一种解决的问题

如果只使用 element-ui 的 el-table 貌似表格一行的数据无法拿到所以只能使用原生table 布局，结合原生 拖拽就可以拿到一行的数据了

原生拖拽总结 html5 drag drop

1. dragstart 开始拖拽，参数 event 事件对象 指向拖拽的项
2. drag 拖拽过程中，参数 event 事件对象指向拖拽的项
3. dragend 拖拽结束，参数 event 事件对象指向拖拽的项
4. dragenter 当拖拽源进入拖拽放置的位置时触发
5. dragleave 当拖拽源离开拖拽放置的位置时触发
6. dragover 当拖拽源在拖拽放置位置移动时触发
7. drop 当拖拽源在拖拽位置放置时触发

e.dataTransfer对象

1. set(key, value) 通常结合 dragstart 方法一起使用，把需要使用到数据放置到 e.dataTransfer 对象中

2. get(key) 通常结合 drop 方法一起使用，把需要用到的数据从 e.dataTransfer 对象中取出来

第一种需求，包含 checkbox 的表格拖拽

1. 问题1 这个地方涉及到 thead, tbody 分开布局问题，tbody中的 checkbox 与右侧数据也是分开布局问题，这里可以解决全选问题，如果直接与右侧数据一起循环渲染出来的话，会导致全选问题很难处理，这里的解决方案是使用 el-checkbox-group, el-checkbox 来实现全选，保证可以获取到数据

1. Checkbox 选中高亮问题，当我点击每一行的checkbox 时，会给每一行加上高亮，当我点击表头的checkbox 时，全部选中，tbody 中的数据全部高亮

1. 数据行拖拽高亮问题，这里我一开始是使用 html5 中 classList.add() 和 classList.remove() 类名，但是发现当给 el-checkbox 的添加背景色类名时，没有效果，发现是渲染出来的 label 标签的类名只有 .el-checkbox 获取 .el-checkbox.is-checked ，其他自动会被删除掉了，所以有一种统一的方式就是给 table-data 数据初始化的时候加上一个 标志 isSetBgColor 属性来标志是否给数据加上背景色

第二种需求，两个表格只从一边拖到另一边

由于如果使用 element-ui 结合 sortablejs 的话，拖拽只能拿到 dom，拿不到数据，所以只能使用原生 table 让后将每一行的数据使用 data-属性隐藏起来，然后拖拽到左边的话，可以拿到当前拖拽项的 dom 元素 再从 dom 元素中 dataset 对象取出数据

同时给拖拽过来的那项设置不能拖拽 filter 属性禁止在此拖拽，然后左边删除时候解除禁止拖拽

第三种需求 两个表格互相拖拽

跟上面的需求，操作步骤类似

组件中需要使用到的 utils.js 类似像 el-check-group el-checkbox, 和 el-form el-form-item 像这种，需要将子组件的事件委托分发给父级组件，作为组件的mixin 混进组件中

function 

去重问题总结，根据对象数据中的 id 去重

缓存问题

深浅拷贝问题