VUE element-ui를 사용하여 재사용 가능한 테이블 구성 요소 작성-JS 튜토리얼-php.cn

VUE element-ui를 사용하여 재사용 가능한 테이블 구성 요소 작성

小云云

풀어 주다： 2017-12-19 16:52:55

원래의

2480명이 탐색했습니다.

Ele.me의 테이블 컴포넌트는 매우 강력하고 기본적으로 프로젝트의 다양한 테이블에 충분하지만...컬럼 단위로 작업하는 것이 익숙하지 않습니다. 그래서 다른 방식으로 변경되었습니다. 이 글은 Table 컴포넌트를 재사용하기 위한 샘플 코드를 작성하기 위한 VUE element-ui를 주로 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

프로젝트에는 테이블이 많기 때문에 재사용성이 가장 중요합니다.

1단계

먼저 기본 테이블을 보여드리겠습니다.

공식 예제의 tableData

tableData: [{
 date: &#39;2016-05-02&#39;,
 name: &#39;王小虎&#39;,
 address: &#39;上海市普陀区金沙江路 1518 弄&#39;
}, {
 date: &#39;2016-05-04&#39;,
 name: &#39;王小虎&#39;,
 address: &#39;上海市普陀区金沙江路 1517 弄&#39;
}, {
 date: &#39;2016-05-01&#39;,
 name: &#39;王小虎&#39;,
 address: &#39;上海市普陀区金沙江路 1519 弄&#39;
}, {
 date: &#39;2016-05-03&#39;,
 name: &#39;王小虎&#39;,
 address: &#39;上海市普陀区金沙江路 1516 弄&#39;
}]

로그인 후 복사

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: &#39;date&#39;,
    value: &#39;日期&#39;,
    width: 80
   },{
    name: &#39;姓名&#39;,
    value: &#39;name&#39;,
    width: 80
   },{
    name: &#39;地址&#39;,
    value: &#39;address&#39;
   }]
  }
 },
...

로그인 후 복사

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

로그인 후 복사

사용자 정의 템플릿 열

구성 요소에 사용자 정의 열을 알려야 하는 경우 Operate

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(){...}
  }
...

로그인 후 복사

테이블 확장 행
을 추가하세요.

sl_table.vue가 isExpand 속성을 전달하는 한 너비와 유사합니다. 다음은 한 번에 한 행만 확장할 수 있는 효과입니다.

//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] : [] 
  }
 }
}

로그인 후 복사

다른(정렬, 다중 선택) 작업도 비슷하게 추가됩니다. . . 자세히 설명할 필요가 없습니다.