在 q-table 列中显示从字段而不是字段本身派生的值

Question

我有一个特定用户的角色。

它将显示“超级管理员”一词而不是数字 1
它将显示单词“Admin”而不是数字 2
它将显示单词“用户”而不是数字 2 等等。

我正在使用 q-table

     <q-table
              flat
              bordered
              title="USERS"
              :data="allUsers"
              :columns="columns"
              :filter="filter"
              :pagination.sync="initialPagination"
              row-key="id"
            >
              <template v-slot:top-right>
                <q-input
                  outlined
                  dense
                  debounce="300"
                  placeholder="Search"
                  v-model="filter"
                >
                  <template v-slot:append>
                    <q-icon name="search" />
                  </template>
                </q-input>
    
                <div class="q-pa-sm q-gutter-sm"></div>
                <q-btn
                  outline
                  color="white"
                  text-color="black"
                  @click="openCreateUserModal"
                  label="Create Users"
                />
              </template>
    
              <template v-slot:body="props">
                <q-tr :props="props">
                  <q-td
                    v-for="col in props.cols.filter(col => col.name !== 'actions')"
                    :key="col.name"
                  >
                    {{ col.value }}
                  </q-td>
    
                  <td key="actions">
                    <q-btn dense flat color="primary" field="edit" icon="edit" />
                    <q-btn
                      dense
                      flat
                      color="negative"
                      field="delete"
                      icon="delete"
                    />
                  </td>
                </q-tr>
              </template>
            </q-table>

我专栏中的角色

 {
      name: "role",
      align: "center",
      label: "Role",
      field: "role",
      sortable: true
    },

这可能是我想要实现的目标吗？

Answer 1

列定义 can contain format 字段定义自定义格式化函数。该函数使用 2 个参数调用 - 从 field 和 row 检索的值（这对于通过组合来自多个字段的数据创建显示值很有用）

const roleIdToRoleName = {
  1: "Super Admin",
  2: "Admin",
  3: "User"
}

...
{ 
  name: "role", 
  align: "center", 
  label: "Role", 
  field: "role", 
  sortable: true, 
  format: (val, row) => roleIdToRoleName[val] 
},

如果您不通过提供 body 插槽来覆盖默认呈现，则此功能开箱即用 。这是有问题的，因为您将失去很多提供的功能：

field 可以是字符串，但也可以是函数（对于向下钻取某些嵌套对象数据很有用）

format当然不适用

q-table 的默认“获取单元格值”功能如下所示：

const getCellValue(row, col) { const val = typeof col.field === 'function' ? col.field(row) : row[col.field] return col.format ? col.format(val, row) : val }

您当然可以在您的代码中复制它并使用它：

<q-td :props="props" // !! you are missing props here v-for="col in props.cols.filter(col => col.name !== 'actions')" :key="col.name" > {{ getCellValue(props.row, col) }} </q-td>

but 因为这似乎是您覆盖 body 插槽的唯一原因，因为您需要 actions 列的自定义呈现，为什么不直接使用 body-cell-actions插槽代替？这将仅覆盖 actions 列的呈现，其他列将使用默认 q-table 呈现

只需在列定义中添加 actions 列：

{ name: 'actions', label: 'Action', sortable: false}

<template v-slot:body-cell-actions="props"> <q-td :props="props"> <q-btn dense flat color="primary" field="edit" icon="edit" /> <q-btn dense flat color="negative" field="delete" icon="delete" /> </q-td> </template>

在 q-table 列中显示从字段而不是字段本身派生的值

Display value derived from field instead of field itself in q-table column

vue.js

vuejs2

quasar-framework

quasar