<template v-slot:unsignedAction="props"> <q-btn>{{ props.row.DOC_UNSIGNED }}</q-btn> </template> 画面上没有显示按钮
时间: 2024-04-05 09:34:41 浏览: 18
这段代码是一个 Vue.js 的模板,它定义了一个名为 unsignedAction 的插槽,并使用了 props 参数。在插槽中,使用了 Quasar UI 框架的 q-btn 组件来显示 props.row.DOC_UNSIGNED 的值。
根据这段代码本身来看,我无法确定为什么按钮没有显示出来,可能是出现了其他问题。你可以检查一下以下几点:
1. 是否正确引入了 Quasar UI 框架的组件库?
2. 是否在正确的位置使用了该模板,并传入了合适的数据?
3. 是否有 CSS 样式或者其他 JS 代码影响了按钮的显示?
如果以上都检查无误,你可以尝试在浏览器中打开开发者工具,查看控制台输出或者元素样式,以进一步确定问题所在。
相关问题
<template v-slot:body-cell-DOC_UNSIGNED="props"> <q-td :props="props"> <q-btn label="UNSIGNED">{{ props.row.DOC_UNSIGNED }}</q-btn> </q-td> </template> <template v-slot:body-cell-DOC_SIGNED="props"> <q-td :props="props"> <q-btn label="SIGNED">{{ props.row.DOC_SIGNED }}</q-btn> </q-td> </template> 在step < 30的情况下,不显示DOC_UNSIGNED和DOC_SIGNED这两列
这段代码看起来是使用了 Quasar Framework 的表格组件,其中使用了插槽(slot)来自定义表格的各个部分。如果在 step < 30 的情况下不想显示 DOC_UNSIGNED 和 DOC_SIGNED 这两列,可以考虑使用条件渲染来实现。例如,可以在模板中使用 v-if 指令来判断是否要渲染这两列,示例代码如下:
```
<template v-if="step >= 30" v-slot:body-cell-DOC_UNSIGNED="props">
<q-td :props="props">
<q-btn label="UNSIGNED">{{ props.row.DOC_UNSIGNED }}</q-btn>
</q-td>
</template>
<template v-if="step >= 30" v-slot:body-cell-DOC_SIGNED="props">
<q-td :props="props">
<q-btn label="SIGNED">{{ props.row.DOC_SIGNED }}</q-btn>
</q-td>
</template>
```
这样在 step < 30 的情况下,这两列就不会被渲染出来。
<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`组件来在表格中添加按钮。您可以像这样更改模板:
```html
<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>
```
这样,您就可以将按钮添加到每个单元格中。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)