<template>
<div class="hall-wrapper">
<div class="hall-header">
<h1>Event Hall</h1>
<p>Enjoy yourself and have a good time</p>
</div>
<div class="hall-content">
<a-table :columns="columns" :data-source="eventList" :scroll="{ x: 1500, y: 300 }">
<template #bodyCell="{ column }">
<template v-if="column.key === 'operation'">
<a>action</a>
</template>
</template>
</a-table>
</div>
</div>
</template>
<script setup lang="ts">
import {ref} from "vue";
const columns = [
{ title: 'Name', width: 40, dataIndex: 'name', key: 'name', fixed: 'left' },
{ title: 'Time', width: 40, dataIndex: 'time', key: 'time'},
{ title: 'Location', width: 40, dataIndex: 'location', key: 'location'},
{ title: 'Content', width: 100, dataIndex: 'content', key: 'content'},
{ title: 'Principal', width: 40, dataIndex: 'principal', key: 'principal'},
{ title: 'Contact', width: 40, dataIndex: 'contact', key: 'contact'},
{ title: 'Action', width: 40, key: 'operation',fixed: 'right' }
]
const eventList = ref([
{
name: 'Edrward 0',
time: '2022-22-22 22:22:22 ~ 2033-33-33 33:33:33',
location: 'xxxxxxxx',
content: 'London Park no. 0',
principal: 'zhangsan123',
contact: '123456778901'
},
{
name: 'Edrward 0',
time: '2022-22-22 22:22:22 ~ 2033-33-33 33:33:33',
location: 'xxxxxxxx',
content: 'London Park no. 0',
principal: 'zhangsan123',
contact: '123456778901'
},
{
name: 'Edrward 0',
time: '2022-22-22 22:22:22 ~ 2033-33-33 33:33:33',
location: 'xxxxxxxx',
content: 'London Park no. 0',
principal: 'zhangsan123',
contact: '123456778901'
}
])
</script>
<style scoped lang="css"></style>
解决了,问题出在版本上,按照官方给出的"npm i --save ant-design-vue@next"安装完后,一直以为安装的是3.0.0-beta.10的版本,,最后去"package.json"中发现版本不是我想的这个版本,感谢各位的解答
把v-if去掉显示吗? 如果显示说明判断不对 ===改成 ==试试