Element UI 表格删除按钮不显示的解决方法
Element UI 表格删除按钮不显示的解决方法
根据代码中的逻辑,删除按钮只会在 row.summaryName 为 null 且 columnIndex 不等于 5 的情况下显示。如果删除按钮不显示,可以检查以下几点:
- 确保
handleDelete方法正常工作,可以在方法中添加console.log输出来进行调试。 - 确保
row.summaryName的值为null。可以在模板中添加{{ row.summaryName }}来检查值是否正确。 - 检查
columnIndex的值是否为期望的值。可以在模板中添加{{ columnIndex }}来检查值是否正确。 - 检查按钮的样式是否被覆盖或隐藏。可以使用浏览器开发者工具检查按钮的 CSS 样式,或者在按钮上添加
style属性来进行调整。
如果以上方法都没有解决问题,可以提供更多的代码或相关信息,以便更详细地分析和解决问题。
<el-table-column label='操作' align='center' width='100'>
<template slot-scope='{ row }'>
<template v-if='row.summaryName !== null'>
<span></span>
</template>
<template v-else>
<el-button
v-if='row.summaryName === null'
size='mini'
type='text'
width='170px'
@click='handleDelete(scope.row)'
>
删除
</el-button>
</template>
</template>
</el-table-column>
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (row.summaryName === null && columnIndex !== 5) {
if (columnIndex === 0) {
return {
rowspan: 1,
colspan: 4,
};
}
}
},
原文地址: https://www.cveoy.top/t/topic/lNyn 著作权归作者所有。请勿转载和采集!