<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:body="props"> <q-tr :props="props"> <q-td key="DOC_UNSIGNED" :props="props"> <q-btn >{{ props.row.DOC_UNSIGNED }}</q-btn> </q-td> </q-tr> </template> </q-table> vue 怎么修改可以单独给DOC_UNSIGNED列的单元格加按钮,但不影响其他列的样式
时间: 2023-07-19 22:36:49 浏览: 65
Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能
5星 · 资源好评率100%
你可以在 q-td 组件中使用 class 属性来单独为 DOC_UNSIGNED 列的单元格添加样式类,然后在样式表中定义该样式类的样式,同时还可以在 q-btn 组件中使用 class 属性为按钮添加样式类。例如:
```
<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:body="props">
<q-tr :props="props">
<q-td key="DOC_UNSIGNED" :props="props" class="doc-unsigned-cell">
<q-btn class="doc-unsigned-button">{{ props.row.DOC_UNSIGNED }}</q-btn>
</q-td>
</q-tr>
</template>
</q-table>
<style>
.doc-unsigned-cell {
/* DOC_UNSIGNED 列单元格的样式 */
}
.doc-unsigned-button {
/* DOC_UNSIGNED 列单元格中的按钮的样式 */
}
</style>
```
这样就可以单独为 DOC_UNSIGNED 列的单元格添加按钮样式,而不影响其他列的样式。
阅读全文