<tr :key="index" :style="computedRow.style"> :key="index"放在tr上报错`<template v-for>` key should be placed on the `<template>` tag.eslintvue/no-v-for-template-key-on-child <template v-for> key should be placed on the <template> tag.vue(33)
时间: 2024-02-21 16:00:01 浏览: 27
非常抱歉,我之前的回答有误。正确的做法是将`:key`放在`template`标签上,而不是`tr`标签上,这样可以避免报错。修改后的代码如下:
```
<template v-for="(computedRow, index) in computedRows" :key="index">
<tr :style="computedRow.style">
<slot name="top-row" v-bind="{ computedRow }" />
<td v-for="col in columns" :key="col.name" :class="col.alignClass">
<slot :name="col.name" v-bind="{ row, col }" />
</td>
<slot name="bottom-row" v-bind="{ computedRow }" />
</tr>
</template>
```
上面的代码将`:key`指令放在了`template`标签上,并且将`:style`指令放在了`tr`标签上。这样修改后,你的代码应该可以正常运行。如果你还有其他问题或需要更多帮助,请告诉我。
相关问题
<template v-for="(computedRow, index) in computedRows"> <tr :key="index" :style="computedRow.style"> <slot name="top-row" v-bind="{ computedRow }" /> <td v-for="col in columns" :key="col.name" :class="col.alignClass"> <slot :name="col.name" v-bind="{ row, col }" /> </td> <slot name="bottom-row" v-bind="{ computedRow }" /> </tr> </template>优化他的问题
这段代码的问题在于:key指令放在了template标签上,而不是在tr标签上。为了优化这个问题,你应该将:key指令从template标签移动到tr标签上,代码如下:
```
<template v-for="(computedRow, index) in computedRows">
<tr :key="index" :style="computedRow.style">
<slot name="top-row" v-bind="{ computedRow }" />
<td v-for="col in columns" :key="col.name" :class="col.alignClass">
<slot :name="col.name" v-bind="{ row, col }" />
</td>
<slot name="bottom-row" v-bind="{ computedRow }" />
</tr>
</template>
```
这样修改后,你的代码应该可以通过linting检查并且可以正常运行。如果你还有其他问题或需要更多帮助,请告诉我。
<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列的单元格加按钮,但不影响其他列
你可以为 DOC_UNSIGNED 列的单元格添加一个特有的 CSS 类,并在该类下设置按钮的样式。具体的代码如下:
```
<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">
<q-btn>{{ props.row.DOC_UNSIGNED }}</q-btn>
</q-td>
</q-tr>
</template>
</q-table>
<style>
.doc-unsigned q-btn {
/* 在 doc-unsigned 类中设置按钮的样式 */
}
</style>
```
这样就可以为 DOC_UNSIGNED 列的单元格中的按钮设置特定的样式,而不影响其他列的样式。