在表格单元格中显示复杂内容时，Quasar qTable 的 q-td 上的 Id 值

Posted 2023-02-14

【中文标题】在表格单元格中显示复杂内容时，Quasar qTable 的 q-td 上的 Id 值

【英文标题】：Id value on q-td for Quasar qTable when displaying complex content in table cell

【发布时间】：2020-12-14 18:47:44

【问题描述】：

我正在从 Laravel API 检索数据并将其格式化为 Quasar Table。我大部分时间都在工作，但是 q-td 标签上的 key 属性有问题。对于一个简单的键值对，我可以使用键名，但在某些列中，我有嵌套数据或数组——例如——状态是一个具有名称和颜色的对象，我用它来填充 qSelect 组件。 tags 字段包含一个标签数组，我在 v-for 中使用这些标签来显示一系列 qBadges。

如果我指定字段名称，则会收到错误消息“避免使用非原始值作为键，而是使用字符串/数字值。” - 因为该字段的值是一个对象或数组，而不是字符串或数字。我尝试使用 id 或任何其他字段，但出现错误“检测到重复键：'id'。这可能会导致更新错误。'

<q-table
  ref="table"
  title="Invoices"
  :data="invoices"
  :columns="columns"
  color="primary"
  row-key="id"
  :loading="loading"
  no-data-label="no invoices within search prameters"
  :visible-columns="visibleColumns"
  :selected-rows-label="getSelectedString"
  selection="multiple"
  :selected.sync="selected">
  <template v-slot:top="props">
    <q-btn
      flat round dense
      :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
      @click="props.toggleFullscreen"
      class="q-ml-md"
    />
    <q-space />
    <q-select
      v-model="visibleColumns"
      multiple
      borderless
      dense
      options-dense
      emit-value
      map-options
      :options="columns"
      option-value="name"
      style="min-width: 150px"
    />
  </template>
  <template v-slot:body="props">
    <q-tr :props="props">
      <q-td auto-width>
         <q-checkbox dense v-model="props.selected" />
      </q-td>
      <q-td key="invoice_number" :props="props">
         props.row.invoice_number 
      </q-td>
      <q-td key="id" :props="props">
         props.row.business.name 
      </q-td>
      <q-td key="invoiced_at" :props="props">
        <span v-if="props.row.invoiced_at">
           formatDate(props.row.invoiced_at, 'MMM D, YYYY')
        </span>
      </q-td>
      <q-td key="paid_at" :props="props">
        <span v-if="props.row.paid_at">
           formatDate(props.row.paid_at, 'MMM D, YYYY')
        </span>
      </q-td>
      <q-td key="id" :props="props">
        <q-select v-if="authuser && authuser.is_crew" rounded outlined fill-input :label-color="props.row.status.color" :color="props.row.status.color" v-model="props.row.status_id" :key="props.row.id" :options="statuses" label="Status" emit-value map-options option-label="name" @input="(val) => saveRow(props.row)">
          <template v-slot:append>
            <q-icon name="fas fa-circle" :color="props.row.status.color" />
          </template>
        </q-select>
        <q-badge v-if="!authuser || !authuser.is_crew && props.row.status" :color="props.row.status.color">props.row.status.name</q-badge>
      </q-td>
      <q-td key="notes" :props="props">
        <div class="table-description cursor-pointer">
          <q-icon v-if="!props.row.notes" name="fas fa-comment-alt" class="float-right" />
           props.row.notes 
          <q-popup-edit
            v-if="authuser.is_crew"
            buttons
            v-model="props.row.notes"
            @save="(val, initialValue) => saveRow(props.row)"
          >
            <q-input
              type="textarea"
              v-model="props.row.notes"
              autofocus
              counter
              @keyup.enter.stop
            />
          </q-popup-edit>
        </div>
      </q-td>
      <q-td key="id" :props="props">
        <q-chip size="xs" v-for="(tag, idx) in props.row.tags" :key="idx" :label="tag" />
      </q-td>
      <q-td key="total" :props="props">
         props.row.total 
      </q-td>
      <q-td key="id" :props="props">
        <div class="text-grey-8 q-gutter-xs">
          <q-btn size="12px" flat dense round icon="more_vert">
            <q-menu>
              <q-list style="min-width: 100px">
                <q-item v-if="mode !== 'view'" clickable v-close-popup :to="'/invoice/'+props.row.id+'/view'">
                  <q-item-section avatar>
                      <q-icon color="primary" name="fas fa-eye" />
                    </q-item-section>
                  <q-item-section>view</q-item-section>
                </q-item>
                <q-item v-if="authuser.is_crew" clickable v-close-popup :to="'/invoice/'+props.row.id+'/edit'">
                  <q-item-section avatar>
                      <q-icon color="primary" name="fas fa-edit" />
                    </q-item-section>
                  <q-item-section>edit</q-item-section>
                </q-item>
                <q-item v-if="props.row.business" clickable v-close-popup :to="'/business/'+props.row.business.id">
                  <q-item-section avatar>
                      <q-icon color="primary" name="fas fa-user" />
                    </q-item-section>
                  <q-item-section>business</q-item-section>
                </q-item>
                <q-item v-if="authuser.is_crew" clickable v-close-popup @click.native="confirmDelete(props.row)">
                  <q-item-section avatar>
                      <q-icon color="negative" name="fas fa-trash" />
                    </q-item-section>
                  <q-item-section>delete</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
        </div>
      </q-td>
    </q-tr>
  </template>
</q-table>

我的专栏：

  columns: [
     name: 'invoice_number', align: 'left', label: 'Inv Number', field: 'invoice_number', sortable: true ,
     name: 'vendor', align: 'left', label: 'Vendor', field: row => row.businessname, format: (val, row) => `$val`, sortable: true ,
     name: 'invoiced_at', align: 'left', label: 'Invoiced', field: 'invoiced_at', sortable: true ,
     name: 'paid_at', align: 'left', label: 'Paid', field: 'paid_at', sortable: true ,
     name: 'status', align: 'left', label: 'Status', field: row => row.status.name, format: val => `$val`, sortable: true ,
     name: 'notes', align: 'left', label: 'Notes', field: 'notes', sortable: false ,
     name: 'tags', align: 'center', label: 'Tags', field: 'tags', sortable: true ,
     name: 'total', align: 'right', label: 'Total', field: 'total', sortable: true ,
     name: 'id', align: 'right', label: 'Actions', field: 'id', sortable: false 
  ]

数据是从 Laravel 资源返回的，这是一个示例： ["id":49,"total":"19279.36","invoice_number":"2546","name":"Gillen Invoice Summer 2020 2546","notes":null,"status":"id" :20,"name":"Open","path":"invoice-open","priority":2,"color":"cyan-10","model":"App\Invoice","description" :"收到的未付发票","created_at":"2020-05-19T17:24:48.000000Z","updated_at":"2020-05-19T17:24:48.000000Z","deleted_at":null,"vessel_id ":null,"status_id":20,"business":"id":21,"name":"Gillen Diesel & Marine Services","phone":"[phone]","address1" :"811 NE 3rd St","address2":null,"city":"Dania Beach","state":"FL","zipcode":"33004","address_country":null,"email":" [e-mail]","type":"id":30,"name":"Repair","model":"App\Business","icon":null,"color":"grey", "vessel_id":null,"equipment":[],"created_at":"2018-06-01T03:12:43.000000Z","updated_at":"2018-06-01T03:12:43.000000Z","type_id ":30,"url":null

感谢您的帮助 - 很高兴看到堆栈上有更多 Quasar 活动！

【参考方案1】：

您已多次使用 id 作为键。不要使用 id 键，使用列的名称作为键。

<q-td key="vendor" :props="props">
   props.row.business.name 
</q-td>
<q-td key="tags" :props="props">
  <q-chip size="xs" v-for="(tag, idx) in props.row.tags" :key="idx" :label="tag" />
</q-td>

您可以使用tags 和Vendor 作为键。

示例 - https://codepen.io/Pratik__007/pen/PoNpyZV

【讨论】：

您不能使用标签或供应商作为键 - 返回错误：避免使用非原始值作为键，请改用字符串/数字值。我知道我不能多次使用 id 作为键，但我不确定该使用什么。

然后您可以更改列数组中的名称，例如 business_tag 并在键中使用它