com组件 安全提示_吐血整理拖拽组件总结

预计可能会碰到一系列问题

1. el-table el-table-column type=’selection’选中高亮问题
2. 表格行拖拽高亮问题
3. 拖拽时如何获取当前拖拽行数据问题
4. 数据回填问题
5. 数据清除问题
6. 数据超出显示提示问题
7. 如何去掉高亮行

预计可以解决以上问题的方案

1. el-table-column type=”selection” select 方法 当用户手动勾选数据行 checkbox 触发
2. select-all 当用户手动勾选 checkbox 时触发事件
3. selection-change 当选择项发生改变时触发
4. clearSelection 用于多选表格，清空用户选择
5. toggleRowSelection 用于多选表格，切换问题
6. toggleAllSelection 用于多选表格，切换选中所有
7. setCurrentRow 可以解决高亮行问题
8. show-overflow-tooltip 可以解决内容超长隐藏提示问题
9. highlight-current-row 可以去掉高亮行

给我启发的博客网站

1. https://github.com/SortableJS/Sortable
2. https://zhuanlan.zhihu.com/p/83861012
3. https://blog.csdn.net/qq_26440803/article/details/83663511
4. https://blog.csdn.net/weixin_41646804/article/details/80535874
5. https://segmentfault.com/a/1190000012811776
6. https://segmentfault.com/a/1190000009256495

npm 镜像设置问题

1. npm config set registry https://registry.npm.taobao.org
2. npm config get registry
3. npm info express

选择原生拖拽 html5 drag drop

1. 原因是比较可控
2. Sortablejs 目前可能会有些问题
3. Dragstart
4. Drag
5. Dragend
6. Dragenter
7. Dragleave
8. Dragover
9. Drop
10. e.dataTransfer.set()
11. e.dataTransfer.get()
12. Draggable=true

数据请求 v-if=ufd.isInit与 mounted()

1. 数据请求未成功时，mounted已经执行了，会导致 this.$refs.dragTable 未 undefined

Scoped scss ::v-deep 样式穿透问题

element-vue中el-table去除鼠标悬停背景色

elementUI的table组件中选中/取消后，高亮显示选中的行

html5 ondrop 事件不执行问题

在html5 中，遇到 ondrop 事件不执行，可能原因是浏览器的默认行为，需要阻止浏览器的默认行为

html5 dragend 事件好像无法获取到 e.dataTransfer.getData() 的内容

不同组件通讯方式

因为 drop 事件处于 目标元，而 dragstart 是处于 拖拽源，所以需要通信

1. Vuex 保存状态
2. 使用模块化的方式来管理每个模块，或者子项目各自的 store, 汇总到 new Vuex.Store()

但是如果是这样的话，那会碰到一个问题就是，页面刷新的时候，状态会消失的，可能需要借助浏览器本地缓存来解决这个问题

vm.$props 使用

this.$refs.dragTable.toggleRowSelection(item, true)的使用，解决数据回填问题

别的地方需要调用组件的方法需要使用 ref

1. 数据放置表示为 true
2. 数据删除表示为 false

如何调用组件内部的方法

1. https://juejin.im/post/5cde0b43f265da03867e78d3
2. https://www.zoo.team/article/vue-communication
3. Prop/$emit 父组件---->子组件（props）子组件---->父组件（$emit）
4. $emit/$on const Event = new Vue() 公共的 bus 事件
5. Vuex 状态管理
6. $attrs/$listeners
7. Provider/inject 父组件通过 provider 传入变量，任意组件子孙组件通过 inject 来拿到变量
8. $parent/$children / $refs

nth-child 的使用

1. https://www.w3h5.com/post/101.html
2. :first-child 选中列表第一个标签
3. :last-child 选中列表第二个标签
4. Nth-child(3) 选中列表中第几个标签
5. Nth-child(odd) 选中列表奇数标签
6. Nth-child(even) 选中列表偶数标签
7. Nth-child(n+1) 选中标签中奇数行
8. Nth-child(2n-1) 选中标签中奇数行
9. Nth-child(2n) 选中偶数行
10. Nth-child(-n+3)
11. Nth-child(n+5)
12. Nth-last-child(n)
13. Nth-last-child(n+3)
14. Nth-last-child(3n)

Css 如何排除第一个元素的其他元素的4种方式

1. https://www.cnblogs.com/CatcherLJ/p/11174450.html
2. :not(:first-child) {} 匹配的是该父级元素结构下的非第一个子元素
3. :not(:first-of-type) {} 匹配的是该父级元素下某个元素类型是第一个元素

需要有过期字段标志？

选中数据回填的时候需要根据什么去匹配？

如何解决

如何使用 entries(), values(), keys()

1. https://segmentfault.com/a/1190000011616239
2. https://blog.csdn.net/qq_42767631/article/details/84976654
3. https://blog.csdn.net/GXing007/article/details/79499113

Table 滚动加载

1. 防抖函数，防止频繁触发

1. 触发竖向滚动加载 需要配合 height 属性

1. resize 函数

去掉el-table 表头会报错问题

1. show-header=’false’ 报错问题

1. 解决方案是调用 table 表格的 doLayout()方法

1. height=200 和 :show-header=”false” 同时出现会报错
2. https://github.com/ElemeFE/element/issues/17367