VueコンポーネントライブラリElementUI実現表のツリーデータ教程のロード
3778 ワード
ElementUIは表ツリーリストのチュートリアルを読み込みます。参考にしてください。具体的な内容は以下の通りです。
Element UIはVue 2.0をベースフレームとして実現されたコンポーネントライブラリのセットです。開発者、デザイナー、製品マネージャーのために準備されたVue 2.0ベースのコンポーネントライブラリは、セットの設計リソースを提供しています。
キーコードは、el-tableに属性を追加します。tree-props=「{チルドレン:'チルドレン'」、rowは必ずチルドレンと命名してください。公式サイトでも説明しています。
ツリータイプのデータの表示をサポートします。rowにchildrenフィールドが含まれている場合、ツリーデータとして扱われます。ツリーデータをレンダリングする場合は、row-keyを指定しなければなりません。サブノードのデータ非同期ロードをサポートします。Tableのlazy属性はtrueとローディング関数のロードです。rowのハスチルドレンフィールドを指定することにより、どの行がサブノードを含むかを指定します。チルドレンとハスチルドレンはいずれもtree-propsで配置できます。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
Element UIはVue 2.0をベースフレームとして実現されたコンポーネントライブラリのセットです。開発者、デザイナー、製品マネージャーのために準備されたVue 2.0ベースのコンポーネントライブラリは、セットの設計リソースを提供しています。
キーコードは、el-tableに属性を追加します。tree-props=「{チルドレン:'チルドレン'」、rowは必ずチルドレンと命名してください。公式サイトでも説明しています。
ツリータイプのデータの表示をサポートします。rowにchildrenフィールドが含まれている場合、ツリーデータとして扱われます。ツリーデータをレンダリングする場合は、row-keyを指定しなければなりません。サブノードのデータ非同期ロードをサポートします。Tableのlazy属性はtrueとローディング関数のロードです。rowのハスチルドレンフィールドを指定することにより、どの行がサブノードを含むかを指定します。チルドレンとハスチルドレンはいずれもtree-propsで配置できます。
<el-table
ref="Table"
:data="apprItemData"
:header-cell-style="headClass"
@select="handleSelection"
row-key="approveItem"
height="420"
border
default-expand-all
:tree-props="{children: 'children'}">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="itemCode"
label=" ">
</el-table-column>
<el-table-column
prop="approveName"
label=" ">
</el-table-column>
<el-table-column
prop="apprStatusStr"
label=" "
color="blue">
</el-table-column>
</el-table>
バックグラウンドJsonデータ:
{
"id":3,
"itemCode":"123",
"approveName":" ",
"apprStatusStr":" ",
"children":[
{
"id":31,
"itemCode":"111",
"approveName":" ",
"apprStatusStr":" "
}
]
}
<script type="text/babel">
var vm = new Vue({
el: '#app',
data:{
apprItemData : [],
currentPage: 1, //
totalRow: 0, //
pageSize: 10 //
},
computed: {},
watch: {},
created() {},
mounted() {
this.loadItemData();
},
methods: {
//
loadItemData () {
var pageSize = this.pageSize;
var currentPage = this.currentPage;
console.log("pageSize:"+pageSize+",currentPage:"+currentPage);
//debugger;
var geturl = '${root}/config/loadItemData.do?rows='+pageSize + '&page=' + currentPage;
$.ajax({
type: 'get',
url:geturl,
contentType: "application/json; charset=utf-8",
success: function(data) {
//debugger;
console.log("totalRow:"+data.total);
vm.apprItemData = data.rows;
},
error: function(e) {
console.log(" :",e);
}
})
}
}
});
</script>
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。