vue 收起列表-扩展组件

1、主列表js：

<script>
import http from '@/assets/http.js'
import TaskExpand from './components/TaskExpand'
export default {
  name: 'SearchTask',
  components: {
    TaskExpand
  },
  data () {
    return {
      columnsName1: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h(TaskExpand, {
              props: {
                row: params.row
              }
            })
          }
        },
        {
          title: '序号',
          key: 'id',
          align: 'center'
        },
        {
          title: '宝箱名称',
          key: 'boxName',
          align: 'center',
          width: 110
        }
      ]
    }
  }
}
</script>

2、扩展列表vue代码：

<template>
  <div>
    <Table class="rowClassName" :columns="tableTitle" :data="row.entityList"></Table>
  </div>
</template>

<script>
export default {
  props: {
    row: Object
  },
  data () {
    return {
      tableTitle: [
        {
          title: '序号',
          key: 'cid',
          width: 150,
          align: 'center'
        },
        {
          title: '奖励名称',
          key: 'awardName'
        }
      ]
    }
  },
  methods: {
  }
}
</script>

<style>
.ivu-table .demo-table-info-row td {
  background-color: #e0e3e6;
}
@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.video-js .vjs-big-play-button {
  margin-top: 200px;
  margin-left: 380px;
}
</style>

目录结构：