iview踩坑

Tabs关闭错误

image.png

如图所示，tabs可以设置closeable属性设置标签可关闭，但是其存在一个bug就是我们关闭第一项会导致内容与标签不匹配的问题。
原因：如下所示我们常常会给tabpane使用index作为绑定key，删除的时候，如你删除第一项，那么key为0的项会被删除，但是由于数据双向绑定的原因，后面的项key值会依次改变，导致第二项的key也变为0，然后handleTabRemove又检测到有key为0的项，会继续删除，导致删除出错的问题。

解决办法：给key值加上时间戳

:key="item.vmType + new Date().getTime()"

Modal关闭问题

image.png

需求描述：点击modal框确定之后检测数据格式是否符合要求，符合则发送请求关闭modal框，不符合则提示用户，不关闭modal框。
问题描述：我们通过设置modal框绑定的v-model的变量（假设为modalShow变量）的true或false来控制modal框的显示不能正常控制。
解决办法：
iview的modal需要加loading来获取modal显示的控制权。
然后使用如下方法结合modalShow变量来设置modal 的显示。

changeLoading () {
    this.deployModalLoading = false
    this.$nextTick(() => {
       this.deployModalLoading = true
    })
}

参考链接：https://github.com/iview/iview/issues/597

如何触发组件的自定义事件

例如：我们有下图的table，我们设置了type为seletion实现可多选，但是如何实现点击Name就选中同一行的checkbox呢？

image.png

table的实现代码如下：

解决，使用table的ref来获取其自定义事件，通过打印可以看到该实例的自定义事件。

console.log(this.$refs.selection)

image.png

image.png

可以看到其包含toggleSelect事件，所以最后的解决办法如下：在name列的render函数的绑定点击事件中触发toggleSelect()事件。

 {
    title: 'Name',
    key: 'name',
    render (h, params) {
        return h('span', {
            on: {
                click: () => {this.$refs.selection.toggleSelect(params.index)}
            }
        })
    } 
}

---

持续踩坑中.....