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 弄'
}]

table.vue

<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>

ステップ2

表を簡略化します:

//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: &#39;table&#39;,
 data(){
  return{
   tableData:[...],
   tableKey: [{
    name: &#39;date&#39;,
    value: &#39;日期&#39;
   },{
    name: &#39;姓名&#39;,
    value: &#39;name&#39;
   },{
    name: &#39;地址&#39;,
    value: &#39;address&#39;
   }]
  }
 }
}
</script>

ステップ 3

table.vue を再利用するには、データを指定してフィールド名を指定します

新しい親コンポーネント sl_table.vue を作成します

//sl_table.vue
<template>
 <sl-table :tableData="tableData" :tableKey="tableKey"></sl-table>
</template>
<script>
import Table from &#39;@/components/table&#39;
export default{
 name: &#39;sl-table&#39;,
 data(){
  return {
   tableData: [...]
   tableKey: [{
    name: &#39;date&#39;,
    value: &#39;日期&#39;
   },{
    name: &#39;姓名&#39;,
    value: &#39;name&#39;
   },{
    name: &#39;地址&#39;,
    value: &#39;address&#39;
   }]
  }
 },
 components: {
  &#39;sl-table&#39;: Table
 }
}
</script>

table はさらに簡単です。

//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: &#39;table&#39;,
 data(){
  return{
   
  }
 },
 props:[&#39;tableData&#39;,&#39;tableKey&#39;],
}
</script>

ステップ4

必要に応じてテーブルの形式を変更できます

列幅

これは比較的簡単で、属性を直接追加できます

//sl_table.vue
...
 data(){
  return {
   tableData: [...]
   tableKey: [{
    name: 'date',
    value: '日期',
    width: 80
   },{
    name: '姓名',
    value: 'name',
    width: 80
   },{
    name: '地址',
    value: 'address'
   }]
  }
 },
...

table.vue

//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: &#39;date&#39;,
     value: &#39;日期&#39;,
     operate: true
    },{
     name: &#39;姓名&#39;,
     value: &#39;name&#39;,
     operate: false
    },{
     name: &#39;地址&#39;,
     value: &#39;address&#39;,
     operate: false
    }]
   }
  },
  filters: {
   DateFilter(){...}
  }
...

table Expand row

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

//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: [&#39;tableData&#39;,&#39;tableKey&#39;,&#39;isExpand&#39;,&#39;isExpandOnly&#39;],
methods: {
 handleExpand(row,is_expand){
  if(this.isExpand && this.isExpandOnly){
   this.$refs.raw_table.store.states.expandRows = expanded ? [row] : [] 
  }
 }
}

他の (並べ替え、複数選択) 操作も同様に追加されます。 。 。詳細に入る必要はありません。

関連する推奨事項:

tables_CSSを使用して5つの一般的なレイアウトを実装する方法のCSS例_CSSチュートリアル_CSS_Webページの作成

HTMLでのtableタグの使用方法

テーブルのcellStyleに関するブートストラップとフォーマッタの問題

以上がVUE element-ui を使用して再利用可能な Table コンポーネントを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。