vue-table-with-tree-grid的使用

一。安装依赖，npm i vue-table-with-tree-grid -s

二.引入依赖，注册组件

import TreeTable from 'vue-table-with-tree-grid';

components: {

TreeTable

 },

三.使用组件

 <tree-table

        :data="data2"

        :columns="columns"

        :stripe="stripe"

        :border="border"

        :show-header="showHeader"

        :show-summary="showSummary"

        :show-row-hover="showRowHover"

        :show-index="showIndex"

        :tree-type="treeType"

        :is-fold="isFold"

        :expand-type="expandType"

        :selection-type="selectionType">

    </tree-table>

<script>

import TreeTable from 'vue-table-with-tree-grid';

export default {

   name: 'salePlanUploadAdd',

        components: {

        TreeTable

        },

        data () {

            return {

             stripe: false,//是否显示间隔斑马纹

            border: false,//是否显示纵向边框

            showHeader: true,//是否显示表头

            showSummary: false,//是否显示表尾合计行

            showRowHover: true,//鼠标悬停时，是否高亮当前行

            showIndex: false,//是否显示数据索引

            treeType: true,//是否为树形表格

            isFold: true,//树形表格中父级是否默认折叠

            expandType: false,//是否为展开行类型表格（为 True 时，需要添加作用域插槽, 它可以获取到 row, rowIndex)

            selectionType: false,//是否显示间隔斑马纹,

        data2: [

           

          {

            name: '根组织',

            description: '111',

            owner:'admin',

            active: true,

            children: [

              {

                name: '大中华区',

                description: 'ceshi1',

                owner: '33',

                active: true,

                children: [

                  {

                    name: '浙江省',

                    description: 'hahah',

                    owner: '22',

                    active: true,

                    children: [

                      {

                        name: '杭州市',

                        description: '9999',

                        owner: '111',

                        active: true

                      }

                    ]

                  }

                ]

              }

            ],

          },

          {

            name: 'Tom',

            sex: 'male',

            likes: ['football', 'basketball'],

            score: 20,

          },

        ],

        //表格标题数据

        columns: [

            {

                label: "用户组名",

                prop: "name"

            },

            {

                label: "描述",

                prop: "description",

                minWidth: "50px"

            },

            {

                label: "所有者",

                prop: "owner"

            }

           

           

        ]

 

            };

        },

        mounted(){

        }

}

</script>