VUE element-ui는 테이블 구성요소의 재사용을 구현합니다.

이 글은 Table 컴포넌트를 재사용하기 위한 샘플 코드를 작성하기 위한 VUE element-ui를 주로 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

Ele.me의 테이블 컴포넌트는 매우 강력하고 기본적으로 프로젝트의 다양한 테이블에 충분하지만... 컬럼 단위로 작업하는 것이 익숙하지 않습니다 =. =그래서 다른 방식으로 바뀌었습니다(본질은 변하지 않았다고는 말씀드리지 않겠습니다).

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

1단계

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

table공식 예제 데이터

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>

Step 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을 만듭니다. vue는 더욱 간단합니다

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

사용자 정의 템플릿 열

구성 요소에 사용자 정의 열을 알려야 하는 경우 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] : [] 
  }
 }
}

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

관련 권장 사항:

DataTable 플러그인을 사용하여 데이터의 비동기 로드를 구현하는 방법에 대한 자세한 설명

HTML에서 테이블 마우스 끌기 정렬을 구현하는 방법

JS를 사용하여 테이블에 고정 테이블 헤더를 구현하는 방법 가로 스크롤로 테이블과 헤더가 변경됩니다. Scroll

위 내용은 VUE element-ui는 테이블 구성요소의 재사용을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!