v-slot:[`unsignedAction`]="unsigned" 报错非 null 断言只能在 TypeScript 文件中使用。ts(8013)

抱歉，我的回答有误。在模板中使用动态 `v-slot` 时，需要使用方括号语法来绑定插槽名，但是由于 TypeScript 不支持非空断言运算符 `!`，因此会出现错误。正确的写法是使用正常的绑定语法来绑定插槽名，如下所示：

<q-table class="col-md-12" style="margin-top: 15px"
  dense
  :pagination="pigitions"
  :rows="rows"
  :columns="columns"
  row-key="ITEM_ID"
  :selected-rows-label="getSelectedString"
  selection="multiple"
  :loading="loading"
  v-model:selected="selected">

  <template #unsignedAction="unsigned">
    <td>
      <q-btn>{{ unsigned.row.DOC_UNSIGNED }}</q-btn>
    </td>
  </template>

  <template #signedAction="signed">
    <td>
      <q-btn>{{ signed.row.DOC_SIGNED }}</q-btn>
    </td>
  </template>

</q-table>

在这里，我们使用 `#` 符号来绑定插槽名，然后将插槽作用域传递给子组件。

相关问题

<q-table class="col-md-12" style="margin-top: 15px" dense :pagination="pigitions" :rows="rows" :columns="columns" row-key="ITEM_ID" :selected-rows-label="getSelectedString" selection="multiple" :loading="loading" v-model:selected="selected"> <template v-slot:unsignedaction="unsigned"> <td> <q-btn>{{ unsigned.row.DOC_UNSIGNED }}</q-btn> </td> </template> <template v-slot:signedaction="signed"> <td> <q-btn>{{ signed.row.DOC_SIGNED }}</q-btn> </td> </template> </q-table> 怎样让v-slot:unsignedaction有效

为了让 `v-slot:unsignedaction` 生效，需要在 `<q-table>` 组件中添加 `slot-scope` 属性，告诉 Vue.js 如何将插槽作用域传递给子组件。在这种情况下，`slot-scope` 属性应该设置为 `props`，以便在插槽中使用 `props.unsigned` 访问未签名行的数据。修改后的代码如下：

<q-table class="col-md-12" style="margin-top: 15px"
  dense
  :pagination="pigitions"
  :rows="rows"
  :columns="columns"
  row-key="ITEM_ID"
  :selected-rows-label="getSelectedString"
  selection="multiple"
  :loading="loading"
  v-model:selected="selected"
  slot-scope="props">

  <template v-slot:unsignedaction="unsigned">
    <td>
      <q-btn>{{ props.unsigned.row.DOC_UNSIGNED }}</q-btn>
    </td>
  </template>

  <template v-slot:signedaction="signed">
    <td>
      <q-btn>{{ signed.row.DOC_SIGNED }}</q-btn>
    </td>
  </template>

</q-table>

<q-table class="col-md-12" style="margin-top: 15px" dense :pagination="pigitions" :rows="rows" :columns="columns" row-key="ITEM_ID" :selected-rows-label="getSelectedString" selection="multiple" :loading="loading" :visible-columns="visibleColumns" v-model:selected="selected"> <template v-slot:unsignedAction="props"> <q-btn label="123">{{ props.row.DOC_UNSIGNED }}</q-btn> </template> <template v-slot:signedAction="props"> <q-btn label="123">{{ props.row.DOC_SIGNED }}</q-btn> </template> </q-table> 如何把按钮加入到DOC_UNSIGNED和DOC_SIGNED的列里

您可以使用`q-td`组件来在表格中添加按钮。您可以像这样更改模板：

<q-table class="col-md-12" style="margin-top: 15px"
  dense
  :pagination="pigitions"
  :rows="rows"
  :columns="columns"
  row-key="ITEM_ID"
  :selected-rows-label="getSelectedString"
  selection="multiple"
  :loading="loading"
  :visible-columns="visibleColumns"
  v-model:selected="selected"
>
  <template v-slot:body-cell-Doc_UNSIGNED="props">
    <q-td :props="props">
      <q-btn label="123">{{ props.row.DOC_UNSIGNED }}</q-btn>
    </q-td>
  </template>
  <template v-slot:body-cell-Doc_SIGNED="props">
    <q-td :props="props">
      <q-btn label="123">{{ props.row.DOC_SIGNED }}</q-btn>
    </q-td>
  </template>
</q-table>

这样，您就可以将按钮添加到每个单元格中。