fix(F006): 资讯列表操作列改用 DataTable 具名插槽(cover/action) — 修复编辑/删除按钮不显示

This commit is contained in:
zou 2026-08-28 18:10:15 +08:00
parent d6f6e294a9
commit 4f0c5a2bc1

View File

@ -53,10 +53,12 @@ const editForm = reactive({
const columns = [
{ prop: 'id', label: 'ID', width: 90 },
{ label: '封面', width: 160, slot: 'cover' },
{ prop: 'title', label: '资讯标题', minWidth: 260 },
{ prop: 'categoryName', label: '分类', width: 120, formatter: (r: Info) => r.categoryName || '--' },
{ prop: 'status', label: '状态', width: 90, formatter: (r: Info) => r.status === 0 ? '草稿' : '已发布' },
{ prop: 'createTime', label: '发布时间', width: 170 },
{ label: '操作', width: 160, fixed: 'right' as const, slot: 'action' },
]
const imgStyle = computed(() => ({
@ -201,22 +203,16 @@ onMounted(load)
<DataTable :columns="columns" :data="list"
:borderless="true" :loading="loading" :total="total" :page="query.page" :limit="query.limit" :show-pagination="true" row-key="id" empty-text="暂无资讯" @page-change="onPageChange"
@limit-change="onLimitChange">
<template #default="{ row }">
<el-table-column label="封面" width="160">
<template #default="{ row: r }">
<img v-if="r.images" :src="r.images" :style="imgStyle" alt="封面" referrerpolicy="no-referrer" />
<span v-else class="rr-muted">无图</span>
</template>
</el-table-column>
<el-table-column label="操作" width="160" fixed="right">
<template #default="{ row: r }">
<span class="rr-actions">
<el-link type="primary" @click="openEdit(r)">编辑</el-link>
<span class="rr-actions__sep">|</span>
<el-link type="danger" @click="onDelete(r)">删除</el-link>
</span>
</template>
</el-table-column>
<template #cover="{ row }">
<img v-if="row.images" :src="row.images" :style="imgStyle" alt="封面" referrerpolicy="no-referrer" />
<span v-else class="rr-muted">无图</span>
</template>
<template #action="{ row }">
<span class="rr-actions">
<el-link type="primary" @click="openEdit(row)">编辑</el-link>
<span class="rr-actions__sep">|</span>
<el-link type="danger" @click="onDelete(row)">删除</el-link>
</span>
</template>
</DataTable>
</div>