根据你的代码片段,你希望在 activeKey
为 '3'
时不展示操作列。以下是解决方案:
方法1:动态控制 columns 数组
const columns = [
// 其他列...
...(!['3'].includes(activeKey) ? [{
title: '操作',
key: 'operation',
fixed: 'right',
width: 240
}] : [])
]
方法2:使用 v-if 控制整个列(推荐)
修改你的模板部分:
<template v-if="!['3'].includes(activeKey)">
<column
title="操作"
key="operation"
fixed="right"
width="240">
<!-- 你的操作按钮代码 -->
</column>
</template>
Vue3 + Ant Design Vue 完整示例:
<a-table :columns="filteredColumns" :data-source="data">
<script setup>
import { computed } from 'vue';
const props = defineProps({
activeKey: String
});
const baseColumns = [
{ title: 'ID', dataIndex: 'id' },
// 其他固定列...
];
const operationColumn = {
title: '操作',
key: 'operation',
fixed: 'right',
width: 240,
};
const filteredColumns = computed(() => {
return props.activeKey !== '3'
? [...baseColumns, operationColumn]
: baseColumns;
});
</script>
这样当 activeKey
为 '3'
时,操作列将不会渲染到表格中。
注意:如果你使用的是 JSX/TSX,逻辑类似,只需要调整语法即可。
内容由零声教学AI助手提供,问题来源于学员提问