前言:
iview的table功能是越来越丰富了,4.0开始,功能已经可以基本满足我们需要了,跟element可以比较了,尤其是他对render函数的支持性非常好。这里说下他的expand展开功能:
展示效果:
![](https://img-blog.csdnimg.cn/20200717142802452.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE5Nzk2,size_16,color_FFFFFF,t_70)
实现代码:分两个vue文件
1、父组件中:给你的columns中加下面代码
![](https://img-blog.csdnimg.cn/2020071714312242.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE5Nzk2,size_16,color_FFFFFF,t_70)
{
title: '展开',
type: 'expand',
width: 80,
render: (h, params) => {
return h(expandRow, {
props: {
row: params.row
},
on:{
openUploadRow:(val)=>{
this.openUploadRow(val);
},
clickDetail:(val)=>{
this.clickDetail(val);
},
}
})
}
},
2、子组件 expandRow.vue
<template>
<div>
<Row >
<Col span="4">
<!--<span class="expand-key">文档类型: </span>-->
<span class="expand-value">{{ row.archives_type }}</span>
</Col>
<Col span="16">
<!--<span class="expand-key">详情文件名: </span>-->
<span class="expand-value">{{ row.archives_type }}</span>
</Col>
<Col span="4">
<Button class="tab_but" size="small" type="primary" @click="openUploadRow(row)">上传</Button>
<Button class="tab_but" size="small" type="primary" @click="clickDetail(row)">详情 ({{row.sum}})</Button>
</Col>
</Row>
</div>
</template>
<script>
export default {
props: {
row: Object
},
watch: {},
data () {
return {
name: '',
}
},
created () {
},
mounted () {
},
methods: {
openUploadRow(row){
this.$emit('openUploadRow',row);
},
clickDetail(row){
this.$emit('clickDetail',row);
}
},
components: {},
beforeDestroy () {
}
}
</script>
<style lang='less' scoped>
</style>
3、上面是引入expand来,这里在数据加默认第一条展示
![](https://img-blog.csdnimg.cn/20200717143610906.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE5Nzk2,size_16,color_FFFFFF,t_70)
getArchivesSum(str).then(res => {
let datas = res.data;
if(datas.code == 10000){
this.tableData = datas.data.archives_sum;
this.tableData[0]._expanded = true;//默认展开第一个
this.total = parseInt(datas.data.total);
}
})