vue2实现表格嵌套表格----二级列表

一、引入view-ui

1、打开新建的项目，打开终端，下载view-ui依赖包

到这一步，说明下载成功了

2、main.js引入

二、项目加载表格

1、打开iview官网，找到表格这一项，然后看到有一个是可下拉的表格

根据下面这种图片可看到，想要实现下拉的表格，首先再colums数据设置这一项，指定type为expand,
然后如果想要再下拉配置项中设置复杂内容的时候，可以使用render函数

然后，开写，先把内容粘贴到项目中去，

<template>
  <div class="hello">
    <Table :columns="columns" :data="data"></Table>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      columns: [
                    {
                        type: 'expand',
                        width: 50,
                        render: (h, { row: { name, age } }) => {
                            return h('div', name + '-' + age)
                        }
                    },
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
                data: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        job: 'Data engineer',
                        interest: 'badminton',
                        birthday: '1991-05-14',
                        book: 'Steve Jobs',
                        movie: 'The Prestige',
                        music: 'I Cry'
                    },
                    {
                        name: 'Jim Green',
                        age: 25,
                        address: 'London No. 1 Lake Park',
                        job: 'Data Scientist',
                        interest: 'volleyball',
                        birthday: '1989-03-18',
                        book: 'My Struggle',
                        movie: 'Roman Holiday',
                        music: 'My Heart Will Go On'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        job: 'Data Product Manager',
                        interest: 'tennis',
                        birthday: '1992-01-31',
                        book: 'Win',
                        movie: 'Jobs',
                        music: 'Don’t Cry'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        job: 'Data Analyst',
                        interest: 'snooker',
                        birthday: '1988-7-25',
                        book: 'A Dream in Red Mansions',
                        movie: 'A Chinese Ghost Story',
                        music: 'actor'
                    }
                ]
    }
  },
}
</script>


<style scoped>

</style>

然后就可以看到项目中的表格了，我这里是新开了一个项目，所以页面上什么都没有

此时的表格下拉功能就实现了，然后再此功能上添加二级表头，可以看到官网说的使用render函数，于是，我们就写一个render函数

三、修改为二级表格

1、新建一个组件，里面写上自己想要的表格格式，我这里为了方便，于是直接引用官网的第一个表格

<template>
  <div>
    <Table border :columns="columns" :data="data"></Table>
 </div>
</template>
<script >
export default {
  props: {

   },
   data() {
    return {
      columns: [
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
                data: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    }
                ]
    }
   },
  created() {},
  mounted() {},
  beforeDestroy() {}
}
</script>
<style scoped></style>

2、在HelloWorld.vue页面引入这个组件，并注册

// 引入
import SecontTable from './SecontTable.vue';

// 注册
 components: {
    SecontTable,
  },

3、HelloWorld.vue-----在render函数中，调用这个组件

并且传了个值dataList1到组件中去，记得返回组件中接收一下这个列表

   render: (h, { row }) => {
            return h(SecontTable, {
              props: {
                dataList1: row,
              },
              on: {
                onsubmit: () => {
                  console.log('-------------------');
                },
              },
            });
          },

// SecontTable.vue 中接收传值，我这里先不使用，如果后期需要根据这个里面的内容调接口或者渲染内容，直接使用就可以
props: {
    dataList1:{
      type:Array
    }
   },

四、到这里就可以看到完整的效果了