在 Vuetify 中，如何将迷你图组件放在数据 table 行中？

Question

我想为数据 table 中的每一项创建一个 data table that has a column that contains a sparkline。这可能吗？

这是我的目标模型：

Answer 1

您可以选择使用 item.name 插槽。为图表创建一个单独的列，然后使用它的插槽放置迷你图：

  headers: [
    {
      text: "Dessert (100g serving)",
      align: "start",
      sortable: false,
      value: "name",
    },
    { text: "Calories", value: "calories" },
    { text: "Fat (g)", value: "fat" },
    { text: "Carbs (g)", value: "carbs" },
    { text: "Protein (g)", value: "protein" },
    { text: "Iron (%)", value: "iron" },
    { text: "Chart", value: "chart" },
  ],

  <template v-slot:item.chart={item}>
    <v-sparkline
      :value="value"
      :gradient="gradient"
      :smooth="radius || false"
      :padding="padding"
      :line-width="width"
      :stroke-linecap="lineCap"
      :gradient-direction="gradientDirection"
      :fill="fill"
      :type="type"
      :auto-line-width="autoLineWidth"
      auto-draw
    ></v-sparkline>
  </template>

完整示例如下：https://codesandbox.io/s/white-hill-spwzs?file=/src/components/HelloWorld.vue:1174-1618

在 Vuetify 中，如何将迷你图组件放在数据 table 行中？

In Vuetify, how can I put a sparkline component in a data table row?

vue.js

vuetify.js