此ID无法显示 2022-02-17 18:04 采纳率: 100%
浏览 776
已结题

vue3使用ant-design-vue中表格不渲染问题

问题遇到的现象和发生背景

img


https://next.antdv.com/components/table-cn#components-table-demo-fixed-columns-header
如上图所示,我按照官方文档把表格组件引入使用,但是我需要最后一列设置一些超链接进行一些动作,
结果是其他列正常渲染,但是到了最后一列一直无法渲染。
恳请各位看看是哪里有问题,谢谢

问题相关代码,请勿粘贴截图
<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>
运行结果及报错内容

img

  • 写回答

2条回答 默认 最新

查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 2月26日
  • 已采纳回答 2月18日
  • 创建了问题 2月17日

悬赏问题

  • ¥15 echarts动画效果的问题,请帮我添加一个动画。不要机器人回答。
  • ¥60 许可证msc licensing软件报错显示已有相同版本软件,但是下一步显示无法读取日志目录。
  • ¥15 Attention is all you need 的代码运行
  • ¥15 一个服务器已经有一个系统了如果用usb再装一个系统,原来的系统会被覆盖掉吗
  • ¥15 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时,终端显示出了sequence handled的进度条,但是并不出结果就自动终止回到命令提示行了是怎么回事:
  • ¥15 前置放大电路与功率放大电路相连放大倍数出现问题
  • ¥30 关于<main>标签页面跳转的问题
  • ¥80 部署运行web自动化项目
  • ¥15 腾讯云如何建立同一个项目中物模型之间的联系
  • ¥30 VMware 云桌面水印如何添加