icons - 添加图标作为 vuetify 表数据

Question

这是我的 vuetify 表

这是代码的模板----template------------

 <v-card>
            <v-data-table
    :headers="headers"
    :items="desserts"

    :items-per-page="5"
    class="elevation-1"
  >
  
  </v-data-table>

        </v-card>

这是table的实现-----脚本------

 headers: [
          {
            text: 'Campaign Id',
            align: 'start',
            sortable: false,
            value: 'id',
          },
          { text: 'Created by', value: 'created' },
           { text: 'Controls', value: 'control' },
        ],
        desserts: [
          {
            id: '1',
            created:'ABBC',
             control:''
          },
        {
            id: '2',
            created:'ABBC',
             control: '',
          },
]

我想添加图标来控制表数据。我怎么做？

Answer 1

这样您可以添加：

const headers = [
 {
 text: "Top-trader name",
 align: "start",
 sortable: false,
 value: "name"
 },
 { text: "Rank of Top-Trader", value: "ranking" },
 { text: "Followers", value: "followers" },
 { text: "Monthly profitability", value: "profit" },
 { text: "Number of positions", value: "positions" },
 { text: "Risk score", value: "risk" },
 { text: "The graph of profitability", value: "graph", sortable: false },
 {
 text: "Update",
 time: 29,
 align: "center",
 value: "actions",
 sortable: false
 }
];

const bestTopTraders = [
 {
 name: "Mostafa",
 avatar: "/khosravi-sirvan-image.png",
 type: "Binance",
 return: 360
 },
 {
 name: "Ali",
 avatar: "/Sirvan-Khosravi_1500904871.png",
 type: "Something else",
 return: 36
 },
 {
 name: "Hossein",
 avatar: "/Sirvan-Khosravi_1500904871.png",
 type: "Binance",
 return: 60
 }
];