【问题标题】:Add icon as a vuetify table data添加图标作为 vuetify 表数据
【发布时间】:2021-01-12 07:26:11
【问题描述】:

这是我的 vuetify 表

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

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

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

        </v-card>

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

 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: '',
          },
]

我想添加图标来控制表格数据。我是怎么做到的?

【问题讨论】:

    标签: icons vuetify.js vtable v-data-table table-data-gateway


    【解决方案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
     }
    ];
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-03-22
      • 2020-01-12
      • 2021-03-21
      • 2021-08-20
      • 1970-01-01
      • 1970-01-01
      • 2019-12-10
      相关资源
      最近更新 更多