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

Question

我有一个具有这些数字的特定用户的角色。

1. 它将显示“超级管理员”一词，而不是数字 1
2. 它将显示“Admin”一词，而不是数字 2
3. 它将显示“用户”一词，而不是数字 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

列定义可以包含 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。这是有问题的，因为您将失去许多提供的功能：

1. field可以是字符串，但也可以是函数（有助于深入了解某些嵌套对象数据）
2. 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>

但既然您覆盖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>