iview踩坑

Tabs关闭错误

image.png

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

          <Tabs type="card" closable
                @on-tab-remove="handleTabRemove"
                :value="tabs_active">
            <TabPane
              v-for="(item, index) in data.volumes"
              :key="index"
              :label="item.vmType"
              :name="item.vmType"
            >
            </TabPane>
          </Tabs>

解决办法：给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的实现代码如下：

<template>
    <div>
        <Table border ref="selection" :columns="columns4" :data="data1"></Table>
        <Button @click="handleSelectAll(true)">Set all selected</Button>
        <Button @click="handleSelectAll(false)">Cancel all selected</Button>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                columns4: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'Name',
                        key: 'name',
                        render (h, params) {
                            return h('span', {
                                on: {
                                    click: () => {this.$refs.selection.toggleSelect(params.index)}
                                }
                            })
                        } 
                    }
                ],
                data1: [
                    {name: 'John Brown'},
                    {name: 'Jim Green'},
                    {name: 'Joe Black'},
                    {name: 'Jon Snow'}
                ]
            }
        },
        methods: {
            handleSelectAll (status) {
                this.$refs.selection.selectAll(status);
            }
        }
    }
</script>

解决，使用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)}
            }
        })
    } 
}

---

持续踩坑中.....🏃