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)}
}
})
}
}
持续踩坑中.....🏃
