创建Vue JS动态表格组件

Question

我正在学习Vue JS。 我想创建一个组件，用于显示数据表格，并可以在其他组件中重复使用。我有两个props：items（数据）和columns（列名）

items: [
        {
            'id':'1',
            'title': 'hello',
            'description': 'ok ok',
            'created_date': '2018-09-09'
        },
        {
            'id':'2',
            'title': 'hello 2',
            'description': 'ok ok 2',
            'created_date': '2018-10-09'
        }
    ],
    columns: [ 'id', 'title', 'description', 'created_date']

我想创建一个如下所示的表格

<table class="table">
<thead>
    <tr>
        <th v-for="(column, index) in columns" :key="index"> {{column}}</th>
    </tr>
</thead>
<tbody>
    <tr v-for="(item, index) in items" :key="index">
        <td v-for="(column, indexColumn) in columns" :key="indexColumn">{{item.$column}}</td>
    </tr>
</tbody>

我不知道如何通过列名从项目中获取值。是否有可能创建这样的表格？

- user3181303

---

你可以使用 Object.keys 来获取列，而不是传递两个 props，代码如下：<th v-for="(column, index) in Object.keys(items)" :key="index">{{column}}</th> - maxshuty

Answer 1

一切都好，只需将模板项中的值$column更改为item[column]

   <table class="table">
      <thead>
          <tr>
              <th v-for="(column, index) in columns" :key="index"> {{column}}</th>
          </tr>
      </thead>
      <tbody>
          <tr v-for="(item, index) in items" :key="index">
              <td v-for="(column, indexColumn) in columns" :key="indexColumn">{{item[column]}}</td>
          </tr>
      </tbody>
    </table>

- Saravanan

Answer 2

带动态插槽的表格组件

我创建了一个简单的组件，用于动态表格并带有插槽选项。

<template>
  <div id="appTable">
    <table>
      <thead>
        <tr>
          <th v-for="(header, i) in headers" :key="i">
            {{ header }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, i) of data" :key="i">
          <td v-for="(td, j) of slotsProceced" :key="i + '-' + j">
            <slot v-if="td.hasSlot" :name="td.slotName" :item="item" />
            <span v-else>{{ item[td.key] }}</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'AppTable',
  props: {
    headers: {
      type: Object,
      required: true
    },
    data: {
      type: Array,
      required: true
    }
  },
  setup(props, { slots }) {
    const slotsProceced = [];
    for (const key in props.headers) {
      if (Object.prototype.hasOwnProperty.call(props.headers, key)) {
        const slotName = 'item-' + key;
        slotsProceced.push({
          key: key,
          hasSlot: !!slots[slotName],
          slotName: slotName
        });
      }
    }

    return { slotsProceced };
  }
});
</script>

调用的属性：

const headTable = {
  date: "Date",
  price: "Price",
  status: "Status",
  action: "Action",
};
const dataTable = [
  {
    date: "2021-02-03 22:04:16",
    price: "$32.000",
    status: 1,
  },
];

要调用它：

<AppTable :headers="headTable" :data="dataTable">
  <template v-slot:item-action>
    <span>Some Action</span>
  </template>
  <template v-slot:item-status="{ item }">
    <span>{{ item.status === 1 ? 'Active' : 'Inactive' }}</span>
  </template>
</AppTable>

- Juan Aguillón