ホームページ > 記事 > ウェブフロントエンド > VUE element-ui を使用して再利用可能な Table コンポーネントを作成する
Ele.meのテーブルコンポーネントは非常に強力で、プロジェクト内のさまざまなテーブルには基本的に十分ですが...列単位での操作に慣れていません。そこで、別の方法に変更されました。この記事では主に、Table コンポーネントを再利用するためのサンプル コードを記述するための VUE 要素を紹介します。興味のある方はぜひ参考にしてください。
プロジェクトには多くのテーブルがあるため、再利用性が最も重要です。
ステップ1
まず基本的なテーブルを表示しましょう
tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }]
<template> <el-table :data="tableData" border> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template>
表を簡略化します:
//table.vue <template> <el-table :data="tableData" border> <el-table-column v-for="(item,key) in tableKey" :key="key" :prop="item.value" :label="item.name"></el-table-column> </el-table> </template> <script> export default{ name: 'table', data(){ return{ tableData:[...], tableKey: [{ name: 'date', value: '日期' },{ name: '姓名', value: 'name' },{ name: '地址', value: 'address' }] } } } </script>
table.vue を再利用するには、データを指定してフィールド名を指定します
新しい親コンポーネント sl_table.vue を作成します
//sl_table.vue <template> <sl-table :tableData="tableData" :tableKey="tableKey"></sl-table> </template> <script> import Table from '@/components/table' export default{ name: 'sl-table', data(){ return { tableData: [...] tableKey: [{ name: 'date', value: '日期' },{ name: '姓名', value: 'name' },{ name: '地址', value: 'address' }] } }, components: { 'sl-table': Table } } </script>
//table.vue <template> <el-table :data="tableData" border> <el-table-column v-for="(item,key) in tableKey" :key="key" :prop="item.value" :label="item.name"></el-table-column> </el-table> </template> <script> export default{ name: 'table', data(){ return{ } }, props:['tableData','tableKey'], } </script>
必要に応じてテーブルの形式を変更できます
列幅
これは比較的簡単で、属性を直接追加できます
//sl_table.vue ... data(){ return { tableData: [...] tableKey: [{ name: 'date', value: '日期', width: 80 },{ name: '姓名', value: 'name', width: 80 },{ name: '地址', value: 'address' }] } }, ...
//table.vue ... <el-table-column v-for="(item,key) in tableKey" :key="key" :prop="item.value" :label="item.name" :width="item.width"></el-table-column> ...
どのカスタム列であるかをコンポーネントに伝える必要がある場合は、プロパティを追加します
table.vue
<el-table-column v-for="(item,key) in tableKey" v-if="!item.operate" :key="key" :prop="item.value" :label="item.name" :width="item.width"></el-table-column> <!-- 自定义 --> <el-table-column v-else> <template scope="scope"> <slot :name="item.value" :$index="scope.$index" :row="scope.row"></slot> </template> </el-table-column> //sl_table.vue <sl-table :tableData="tableData" :tableKey="tableKey"> <template slot="date" scope="scope"> <span>{{ scope.row.date | DateFilter }}</span> </template> </sl-table> ... data(){ return { tableData: [...] tableKey: [{ name: 'date', value: '日期', operate: true },{ name: '姓名', value: 'name', operate: false },{ name: '地址', value: 'address', operate: false }] } }, filters: { DateFilter(){...} } ...
sl_table.vue が isExpand 属性で渡す限り、width と同様です。ここでは、一度に 1 行のみ展開できるエフェクトを示します:
//sl_table.vue <sl-table :tableData="tableData" :tableKey="tableKey" :isExpand="true" :isExpandOnly="true"> <template slot="expand" scope="scope"> {{...expand something}} </template> ... </sl-table>
//table.vue <el-table :data="tableData" border @expand="handleExpand" ref="raw_table"> <el-table-column v-if="isExpand" type="expand"> <template scope="scope"> <slot name="expand" :$index="scope.$index" :row="scope.row"></slot> </template> </el-table-column> </el-table> ... props: ['tableData','tableKey','isExpand','isExpandOnly'], methods: { handleExpand(row,is_expand){ if(this.isExpand && this.isExpandOnly){ this.$refs.raw_table.store.states.expandRows = expanded ? [row] : [] } } }
関連する推奨事項:
以上がVUE element-ui を使用して再利用可能な Table コンポーネントを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。