동적 열이 있는 요소 UI 테이블

동적 열이 있는 요소 UI 테이블

모든 열을 하드 코딩할 필요 없이 요소 UI 테이블 구성요소를 사용하는 예를 찾고 있다.공식 요소 UI 표 문서를 포함하여 내가 본 모든 예제는 템플릿에 지정된 모든 열을 보여준다.

이런 일을 하려고 한다.내 예전 테이블 구성 요소에서, 이것은 나에게 모든 열과 내 여분의 끝 열을 준다.delete단추를 채우다

<template>
  <div v-if="tableData.length > 0">
    <b-table striped hover v-bind:items="tableData" :fields=" keys.concat(['actions']) ">
      <template slot="actions" slot-scope="row">
        <b-btn size="sm" @click.stop="tableClick(row.item)" class="mr-1">
          Delete
        </b-btn>
      </template>
    </b-table>
  </div>
</template>

대조적으로 요소 UI 표 예제는 모두 여러 번 반복된 것을 사용한다.el-table-column태그. 런타임에 서로 다른 열이 있는 데이터를 로드하기 때문에 이 방법을 사용할 수 없다.

  <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="Date"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="Name"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="Address">
      </el-table-column>
    </el-table>
  </template>

나는 초보자라서 엘테이블을 가지고 내 목표를 달성하는 방법을 이해하려고 애쓴다.

열을 필요한 속성이 있는 개체 배열로 만들 수 있으며 이 열을 템플릿에서 반복하여v-for:

<template>
    <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column v-for="column in columns" 
                         :key="column.label"
                         :prop="column.prop"
                         :label="column.label"
                         :formatter="column.formatter"
                         :min-width="column.minWidth">
        </el-table-column>
        <el-table-column fixed="right">
            <template slot-scope="scope">
              ... your delete button or whatever here...
            </template>
    </el-table-column>
    </el-table>
</template>

어디선가 열이 나는데, 예를 들면 다음과 같은 데이터에 있을 수 있다.

data() {
    return {
      columns: [
        {
          prop: 'date',
          label: 'Date',
          minWidth: 180px
        },
        {
          prop: 'name',
          label: 'Name',
          minWidth: 180px
        },
        {
          prop: 'address',
          label: 'Address',
          formatter: (row, col, cell, index) => this.addressFormatter(cell),  //example of a formatter
        },
      ],
    };
},

참조URL: https://stackoverflow.com/questions/54778338/element-ui-table-with-dynamic-columns