Movatterモバイル変換


[0]ホーム

URL:


PDF
Edit
Suggest a Feature

    Nested list in Vue ListView component

    21 Feb 202524 minutes to read

    The ListView component supports nested lists. For that, thechild property should be defined for the nested list in the array of JSON.

    <template><divclass="control-section"><!-- ListView element --><ejs-listviewid='listview':dataSource='continent':fields='fields':headerTitle='headerTitle'showHeader='true':animation='animation'></ejs-listview></div></template><scriptsetup>import{ListViewComponentasEjsListview}from"@syncfusion/ej2-vue-lists";constcontinent=[{'text':'Asia','id':'01','category':'Continent','child':[{'text':'India','id':'1','category':'Asia','child':[{'text':'Delhi','id':'1001','category':'India',},{'text':'Kashmir','id':'1002','category':'India',},{'text':'Goa','id':'1003','category':'India',},]},{'text':'China','id':'2','category':'Asia','child':[{'text':'Zhejiang','id':'2001','category':'China',},{'text':'Hunan','id':'2002','category':'China',},{'text':'Shandong','id':'2003','category':'China',}]}]},{'text':'North America','id':'02','category':'Continent','child':[{'text':'USA','id':'3','category':'North America','child':[{'text':'California','id':'3001','category':'USA',},{'text':'New York','id':'3002','category':'USA',},{'text':'Florida','id':'3003','category':'USA',}]},{'text':'Canada','id':'4','category':'North America','child':[{'text':'Ontario','id':'4001','category':'Canada',},{'text':'Alberta','id':'4002','category':'Canada',},{'text':'Manitoba','id':'4003','category':'Canada',}]}]},{'text':'Europe','id':'03','category':'Continent','child':[{'text':'Germany','id':'5','category':'Europe','child':[{'text':'Berlin','id':'5001','category':'Germany',},{'text':'Bavaria','id':'5002','category':'Germany',},{'text':'Hesse','id':'5003','category':'Germany',}]},{'text':'France','id':'6','category':'Europe','child':[{'text':'Paris','id':'6001','category':'France',},{'text':'Lyon','id':'6002','category':'France',},{'text':'Marseille','id':'6003','category':'France',}]}]},{'text':'Australia','id':'04','category':'Continent','child':[{'text':'Australia','id':'7','category':'Australia','child':[{'text':'Sydney','id':'7001','category':'Australia',},{'text':'Melbourne','id':'7002','category':'Australia',},{'text':'Brisbane','id':'7003','category':'Australia',}]},{'text':'New Zealand','id':'8','category':'Australia','child':[{'text':'Milford Sound','id':'8001','category':'New Zealand',},{'text':'Tongariro National Park','id':'8002','category':'New Zealand',},{'text':'Fiordland National Park','id':'8003','category':'New Zealand',}]}]},{'text':'Africa','id':'05','category':'Continent','child':[{'text':'Morocco','id':'9','category':'Africa','child':[{'text':'Rabat','id':'9001','category':'Morocco',},{'text':'Toubkal','id':'9002','category':'Morocco',},{'text':'Todgha Gorge','id':'9003','category':'Morocco',}]},{'text':'South Africa','id':'10','category':'Africa','child':[{'text':'Cape Town','id':'10001','category':'South Africa',},{'text':'Pretoria','id':'10002','category':'South Africa',},{'text':'Bloemfontein','id':'10003','category':'South Africa',}]}]}];constfields={tooltip:'text'};constheaderTitle='Continent';constanimation:{duration:0};</script><style>#listview{max-width:400px;margin:auto;border:1pxsolid#dddddd;border-radius:3px;}</style>
    <template><divclass="control-section"><!-- ListView element --><ejs-listviewid='listview':dataSource='continent':fields='fields':headerTitle='headerTitle'showHeader='true'></ejs-listview></div></template><script>import{ListViewComponent}from"@syncfusion/ej2-vue-lists";exportdefault{name:"App",components:{"ejs-listview":ListViewComponent},data:function(){return{continent:[{'text':'Asia','id':'01','category':'Continent','child':[{'text':'India','id':'1','category':'Asia','child':[{'text':'Delhi','id':'1001','category':'India',},{'text':'Kashmir','id':'1002','category':'India',},{'text':'Goa','id':'1003','category':'India',},]},{'text':'China','id':'2','category':'Asia','child':[{'text':'Zhejiang','id':'2001','category':'China',},{'text':'Hunan','id':'2002','category':'China',},{'text':'Shandong','id':'2003','category':'China',}]}]},{'text':'North America','id':'02','category':'Continent','child':[{'text':'USA','id':'3','category':'North America','child':[{'text':'California','id':'3001','category':'USA',},{'text':'New York','id':'3002','category':'USA',},{'text':'Florida','id':'3003','category':'USA',}]},{'text':'Canada','id':'4','category':'North America','child':[{'text':'Ontario','id':'4001','category':'Canada',},{'text':'Alberta','id':'4002','category':'Canada',},{'text':'Manitoba','id':'4003','category':'Canada',}]}]},{'text':'Europe','id':'03','category':'Continent','child':[{'text':'Germany','id':'5','category':'Europe','child':[{'text':'Berlin','id':'5001','category':'Germany',},{'text':'Bavaria','id':'5002','category':'Germany',},{'text':'Hesse','id':'5003','category':'Germany',}]},{'text':'France','id':'6','category':'Europe','child':[{'text':'Paris','id':'6001','category':'France',},{'text':'Lyon','id':'6002','category':'France',},{'text':'Marseille','id':'6003','category':'France',}]}]},{'text':'Australia','id':'04','category':'Continent','child':[{'text':'Australia','id':'7','category':'Australia','child':[{'text':'Sydney','id':'7001','category':'Australia',},{'text':'Melbourne','id':'7002','category':'Australia',},{'text':'Brisbane','id':'7003','category':'Australia',}]},{'text':'New Zealand','id':'8','category':'Australia','child':[{'text':'Milford Sound','id':'8001','category':'New Zealand',},{'text':'Tongariro National Park','id':'8002','category':'New Zealand',},{'text':'Fiordland National Park','id':'8003','category':'New Zealand',}]}]},{'text':'Africa','id':'05','category':'Continent','child':[{'text':'Morocco','id':'9','category':'Africa','child':[{'text':'Rabat','id':'9001','category':'Morocco',},{'text':'Toubkal','id':'9002','category':'Morocco',},{'text':'Todgha Gorge','id':'9003','category':'Morocco',}]},{'text':'South Africa','id':'10','category':'Africa','child':[{'text':'Cape Town','id':'10001','category':'South Africa',},{'text':'Pretoria','id':'10002','category':'South Africa',},{'text':'Bloemfontein','id':'10003','category':'South Africa',}]}]}],fields:{tooltip:'text'},headerTitle:'Continent',};}}</script><style>#listview{max-width:400px;margin:auto;border:1pxsolid#dddddd;border-radius:3px;}</style>

    Help us improve this page

    Please provide additional information

    Please provide additional information

    Please provide additional information

    Please provide additional information

    Please provide additional information
    Please provide additional information
    ×

    [8]ページ先頭

    ©2009-2025 Movatter.jp