快捷導(dǎo)航

vue中el-table多層級嵌套的具體實現(xiàn)

更新時間：2023年10月26日 15:03:37 作者：CV猿碼人

本文主要介紹了vue中el-table多層級嵌套的具體實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

只要你后端可以查到數(shù)據(jù)這個層級可以無限嵌套

這里用了懶加載，每次點擊的時候?qū)?dāng)前點擊的父級id作為查詢條件，向后端發(fā)送請求，來獲取他子級的數(shù)據(jù)，并不是將所有數(shù)據(jù)查出來拼接返回的。

前端代碼

 <el-table
            :data="dataList"
            style="width: 100%"
            row-key="id"
            border
            :lazy="true"
            :load="load"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column
                            prop="name"
                            label="組織姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="natures"
                            label="組織性質(zhì)"
                            width="180">
                    </el-table-column>

                    <el-table-column
                            prop="dateEstablishment"
                            label="成立時間">
                    </el-table-column>
                    <el-table-column
                            prop="leader"
                            label="組織領(lǐng)導(dǎo)">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址">
                    </el-table-column>
</el-table>

        data() {
            return {
                inputForm: {
                    id: '',
                    parentId: '',
                    name: '',
                    sort: '',
                    natures: '',
                    area: '',
                    longitude: '',
                    latitude: '',
                    dateEstablishment: '',
                    leader: '',
                    address: '',
                    regionId:'',
                    regionParentIds:''
                },
                dataList: [],
                loading: false,
           
            }
        },

created() {
            // this.refreshList()
            this.initList()
        },
        methods: {
    
            //獲取右邊樹表
            initList() {
                this.inputForm.parentId=0

                this.get(/organizationInfo/getOrganizationInfoByRegionId?parentId='+this.inputForm.parentId+'&regionId='+this.inputForm.regionId).then((res) => {
                    this.dataList = res
                })

            },
            load(row, treeNode, resolve) {
                this.get(ctx + '/basicinfo/organizationInfo/getOrganizationInfoByRegionId?parent.id=' + row.id).then((res) => {
                    resolve(res)
                })
            },
}

后端代碼

    /**
     * 通過地區(qū)id查詢當(dāng)前Parent的數(shù)據(jù)
     *
     * @param regionId
     * @return
     */
    @Override
    public List<OrganizationInfo> getOrganizationInfoByRegionId(OrganizationInfo organizationInfo) {
        //1.查詢到所有該地區(qū)下的組織信息
        List<OrganizationInfo> organizationInfos = organizationInfoMapper.getOrganizationInfoByRegionId(organizationInfo);
        return organizationInfos;
    }

到此這篇關(guān)于vue中el-table 多層級嵌套的具體實現(xiàn)的文章就介紹到這了,更多相關(guān)vue el-table 多層級嵌套內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: