template !-- 动态展示表格 -- el-table data=tableData border stripe height=height row-click=handleRowClick !-- v-for 循环取表头数据 -- template v-for=item in tableHeader table-column v-if=ite
报错提示是因为v-if和v-else使用了相同的key,而Vue要求v-if和v-else的分支应该使用唯一的key。
你可以尝试将v-if和v-else的分支使用不同的key来解决这个问题。例如,你可以使用一个动态的key,以确保唯一性。示例代码如下:
<template>
<el-table :data="tableData" border stripe :height="height" @row-click="handleRowClick">
<!-- v-for 循环取表头数据 -->
<template v-for="item in tableHeader">
<table-column v-if="item.children && item.children.length" :key="'column-' + item.id" :column-header="item" />
<el-table-column v-else :key="'table-column-' + item.id" :label="item.label" :prop="item.prop" align="center" />
</template>
</el-table>
</template>
在上面的代码中,我使用了一个动态的key,通过在key中添加前缀来确保唯一性。例如,对于v-if的分支,我添加了"column-"前缀,而对于v-else的分支,我添加了"table-column-"前缀。
这样做可以解决报错问题。希望能帮到你
原文地址: http://www.cveoy.top/t/topic/iTnW 著作权归作者所有。请勿转载和采集!