Как передать компонент для рендеринга в реквизит в Vue Js? - PullRequest
Новая
       10

Как передать компонент для рендеринга в реквизит в Vue Js?

0 голосов
/ 21 сентября 2018

У меня есть ситуация, когда мне нужно визуализировать ячейку данных синхронно

, где tableProps содержит все столбцы и dataProps. 

tableProps: {
  cols: [{
      cellProps: {
        class: "as"
      },
      cellRenderer: ((data) => {
        return <a onlick = {
          this.onDataClick
        }
        class = "btn btn-link" > {
          data.name
        } < /a>
      }).bind(this),
      dataKey: "name",
      dataType: String,
      label: "Name",
      sortable: true
    }       
  ],
  enableSelect: true,
  onPageChange: this.onPageChange,
  onSelect: (selectedRow) => console.log("selectedRow", selectedRow),
  onSelectAll: (data) => console.log("slectAllClick", data),      
  page: 0,
  rowProps: {
    onClick: (event, rowData) => {
      this.onClick(rowData);
    }
  },
  rowsPerPage: 5,
  title: "Nutrition"
}

Существует средство визуализации ячейки, гдеданные могут быть переданы для отображения пользовательских данных, таких как кнопки привязки и т. д.

1 Ответ

0 голосов
/ 23 сентября 2018

решение найдено, вместо того, чтобы отправлять функцию, слоты с областью действия могут использоваться для визуализации динамического содержимого для каждой ячейки.Спасибо за проявленный интерес. 

**Table.Vue(child, generic-table)**
<table class="table table-bordered">
  <thead>
    <tr>
      <th v-for="col in options.cols" :key="col.id">
        <template v-if="col.colRenderer">
          {{col.colRenderer(col)}}
        </template>
        <template v-else>
          {{col.label}}
        </template>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="datum in data" :key="datum.id" @click="(e)=> options.rowProps.onClick ? options.rowProps.onClick(e, datum): ''">
      <td v-for="col in options.cols" :key="col.id" @click="()=> col.onClick ? col.onClick(datum[col.dataKey]): ''">
        <template v-if="col.cellSlot">
          <slot :name="col.cellSlot.name" :data="datum[col.dataKey]"/>
        </template>
        <template v-else>
          {{datum[col.dataKey]}}
        </template>
      </td>
    </tr>
  </tbody>
</table>

**Calling component(Parent, with Custom Data cells)**
<v-table
  :name="carePlanName"
  :options="tableProps"
  :total-count="totalCount"
  :data="users" >      
    <div
      slot=""
      slot-scope="slotProps">
      <!-- Define a custom template for CellData Data -->
      <!-- `slotProps` to customize each todo.            -->
      <span v-if="slotProps">✓
        <button>{{ slotProps.name }}</button>
      </span>
    </div>
</v-table>
...