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)}
            }
        })
    } 
}

持续踩坑中.....🏃

推荐阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 5,019评论 0 17
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 124,531评论 18 136
  • 《裕语言》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 10...
    叶染柒丶阅读 15,340评论 5 17
  • Today I saw a video.The content in the vedio is very impr...
    HelloToo阅读 246评论 1 0
  • 愿时光能缓,愿故人不散 愿你惦记的人能跟你道声晚安 愿你独闯的日子里不觉得孤单 或许人的一生,就这样,假若不是身边...
    神经病啊_7539阅读 83评论 0 0
  • 时间总是过的很快,来不及停留。大一就这样结束了,没有很努力的学习,也没有做过什么厉害的大事,不过还好,至少烦恼很少...
    大大大世界阅读 68评论 0 0
  • 郭相麟 人生行走在路上,会遇到一些事一些人,要知道什么可以说,什么不能说! 有关于国家,法律,社会,个人安全保...
    郭相麟阅读 114评论 0 0