drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed #1842

Browse source
This commit is contained in:
梁灏 2017-09-13 15:06:02 +08:00
parent 7b3d5ec124
commit bdfab3b99e
2 changed files with 85 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

143
examples/routers/tabs.vue
View file

@ -1,69 +1,94 @@
<!--<template>-->
<!--<Tabs value="name1" :animated="false">-->
<!--<Tab-pane label="test" name="test">-->
<!--<Tabs type="card" v-bind:animated="true">-->
<!--<Tab-pane label="标签2一">标签2一的内容</Tab-pane>-->
<!--<Tab-pane label="标签2二">标签2二的内容</Tab-pane>-->
<!--<Tab-pane label="标签2三">标签2三的内容</Tab-pane>-->
<!--</Tabs>-->
<!--</Tab-pane>-->
<!--<Tab-pane :label="label1" name="name1">-->
<!--<Table :columns="columns1" :data="data1"></Table>-->
<!--</Tab-pane>-->
<!--<Tab-pane label="标签二" name="name2">-->
<!--<Table :columns="columns1" :data="data1"></Table>-->
<!--</Tab-pane>-->
<!--<Tab-pane label="标签三" name="name3">-->
<!--<Table :columns="columns1" :data="data1"></Table>-->
<!--</Tab-pane>-->
<!--</Tabs>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--label1: (h) => {-->
<!--return h('div', [-->
<!--h('span', '标签一'),-->
<!--h('Button', 'button')-->
<!--]);-->
<!--},-->
<!--columns1: [-->
<!--{-->
<!--title: '姓名',-->
<!--key: 'name'-->
<!--},-->
<!--{-->
<!--title: '年龄',-->
<!--key: 'age'-->
<!--},-->
<!--{-->
<!--title: '地址',-->
<!--key: 'address'-->
<!--}-->
<!--],-->
<!--data1: [-->
<!--{-->
<!--name: '王小明',-->
<!--age: 18,-->
<!--address: '北京市朝阳区芍药居'-->
<!--},-->
<!--{-->
<!--name: '张小刚',-->
<!--age: 25,-->
<!--address: '北京市海淀区西二旗'-->
<!--},-->
<!--{-->
<!--name: '李小红',-->
<!--age: 30,-->
<!--address: '上海市浦东新区世纪大道'-->
<!--},-->
<!--{-->
<!--name: '周小伟',-->
<!--age: 26,-->
<!--address: '深圳市南山区深南大道'-->
<!--}-->
<!--]-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template> <template>
<Tabs value="name1" :animated="false"> <Tabs type="card" closable @on-tab-remove="handleTabRemove">
<Tab-pane label="test" name="test"> <TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
<Tabs type="card" v-bind:animated="true"> <TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
<Tab-pane label="标签2一">标签2一的内容</Tab-pane> <TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>
<Tab-pane label="标签2二">标签2二的内容</Tab-pane>
<Tab-pane label="标签2三">标签2三的内容</Tab-pane>
</Tabs>
</Tab-pane>
<Tab-pane :label="label1" name="name1">
<Table :columns="columns1" :data="data1"></Table>
</Tab-pane>
<Tab-pane label="标签二" name="name2">
<Table :columns="columns1" :data="data1"></Table>
</Tab-pane>
<Tab-pane label="标签三" name="name3">
<Table :columns="columns1" :data="data1"></Table>
</Tab-pane>
</Tabs> </Tabs>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
label1: (h) => { tab0: true,
return h('div', [ tab1: true,
h('span', '标签一'), tab2: true
h('Button', 'button') }
]); },
}, methods: {
columns1: [ handleTabRemove (name) {
{ this['tab' + name] = false;
title: '姓名',
key: 'name'
},
{
title: '年龄',
key: 'age'
},
{
title: '地址',
key: 'address'
}
],
data1: [
{
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居'
},
{
name: '张小刚',
age: 25,
address: '北京市海淀区西二旗'
},
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道'
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道'
}
]
} }
} }
} }

2
src/components/tabs/tabs.vue
View file

@ -150,7 +150,7 @@
const index = this.navList.findIndex((nav) => nav.name === this.activeKey); const index = this.navList.findIndex((nav) => nav.name === this.activeKey);
const prevTabs = this.$refs.nav.querySelectorAll(`.${prefixCls}-tab`); const prevTabs = this.$refs.nav.querySelectorAll(`.${prefixCls}-tab`);
const tab = prevTabs[index]; const tab = prevTabs[index];
this.barWidth = parseFloat(tab.offsetWidth); this.barWidth = tab ? parseFloat(tab.offsetWidth) : 0;
if (index > 0) { if (index > 0) {
let offset = 0; let offset = 0;