iview的expand展开功能，默认展开第一个

前言：

       iview的table功能是越来越丰富了，4.0开始，功能已经可以基本满足我们需要了，跟element可以比较了，尤其是他对render函数的支持性非常好。这里说下他的expand展开功能：

展示效果：

实现代码：分两个vue文件

1、父组件中：给你的columns中加下面代码

         {
            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来，这里在数据加默认第一条展示

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

官网入口