VUE + element踩坑记录

1、树型table

• 增加属性 :tree-props="{ children:'children',hasChildren:'hasChildren'}"
• 注意数据结构
• 要注意row-key 的值，不能是id，且要和数据对应

2、弹框内组件数据不刷新

• 可以给组件加个v-if，根据弹框的显示隐藏来加载删除组件

3、刷新当前页面

• 刷新view-router, 结合vuex给定布尔值，v-if用于view-router的显示隐藏来实现刷新
• 也可以通过inject/provide这个方式，之前有写过具体用法，

4、上传的accept

• accept="video/*" 表示视频，还有audio表示音频，image表示图片
• 单个限制 accept="image/png"，accept="video/mp4"

5、element select选中的值已经改变，却没有显示

• 原因是因为option的值是动态获取的，改变其他选项时会更新这个值，但是render函数没有自动更新，所以选择的时候需要强制更新

• 需要change方法加this.$forceUpdate()

6、分页表格序号自定义第二页叠加

• 给 type=“index”的table-colum增加index属性
  index值为函数，返回一个值

: index="(index)=>{return index+1+this.$refs.tableRef.offset}

• 以上例子序号从1开始，比如一页10条数据，第二页就从11开始

7、form数据已经改变，并未即时触发双向绑定

因为this.form.user =" " 这种形式vue并不能检测到它的变化(说法也不确定，有时候又是好的😠误导人问题的走向)

使用☞ Vue.set(this.form, "user", value) 形式可行

如果是一个下拉框改变另一个下拉框的值也要这么赋值。要不然另一个下拉框的值总是触发不了，除非点个别的form项

8、form的model属性表示当前form的值，双向数据绑定的时候值改变的时候，model对应的属性就会同步