bab-icon/resources/assets/js/components/TreeTable.vue

<template>
    <div>

        <el-table
            :data="tableData"
            style="width: 100%"
            row-key="id"
            stripe
            border
            lazy
            :load="load"
            :tree-props="{children: childrenName, hasChildren: hasChildrenName}">
            <el-table-column :prop="item.key"   :label="item.name" v-for="(item,index) in title">
            </el-table-column>

        </el-table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [

            ]
        }
    },
    props:['title','sendUrl','childrenName','hasChildrenName'],
    mounted() {
        let ret=this.getDataList({'p_id':0});
        this.tableData=ret;
    },
    methods: {
        startSend(sendData){
            let ret=this.getDataList(sendData);
            this.tableData=ret;
        },
        load(tree, treeNode, resolve) {
            let ret=this.getDataList({'p_id':tree.id});
            resolve(ret)
        },
        getDataList(sendData) {
            var cmObjStr = eval("(" + $.ajax({
                url: this.sendUrl,
                async: false,//关键是这个参数 是否异步请求=>false:使用同步请求
                type: "POST",
                data: sendData
            }).responseText + ")");
            if(cmObjStr.code*1==1){
                return cmObjStr.data;
            }else {
                return [];
            }
        }
    },
}
</script>