社区 › 代码 › 如何使用 vue vxe-table 来实现一个产品对比表表格

庞悦 发表于 2025-6-26 21:48:57

如何使用 vue vxe-table 来实现一个产品对比表表格

如何使用 vuevxe-table 来实现一个产品对比表表格
查看官网：https://vxetable.cn
gitbub：https://github.com/x-extends/vxe-table
gitee：https://gitee.com/x-extends/vxe-table
效果


代码

<template>

    <vxe-grid v-bind="gridOptions">
      <template #img11>
      <vxe-image src="https://vxeui.com/resource/productImg/m11.jpg" width="100%"></vxe-image>
      </template>

      <template #img12>
      <vxe-image src="https://vxeui.com/resource/productImg/m12.jpg" width="100%"></vxe-image>
      </template>

      <template #img21>
      <vxe-image src="https://vxeui.com/resource/productImg/m21.jpg" width="100%"></vxe-image>
      </template>

      <template #img22>
      <vxe-image src="https://vxeui.com/resource/productImg/m22.jpg" width="100%"></vxe-image>
      </template>

      <template #img31>
      <vxe-image src="https://vxeui.com/resource/productImg/m31.jpg" width="100%"></vxe-image>
      </template>

      <template #img32>
      <vxe-image src="https://vxeui.com/resource/productImg/m32.jpg" width="100%"></vxe-image>
      </template>

      <template #cell11="{ row }">
      {{ row.product11 ? '✔️' : '❌' }}
      {{ row.product11 }}
      </template>

      <template #cell12="{ row }">
      {{ row.product12 ? '✔️' : '❌' }}
      {{ row.product12 }}
      </template>

      <template #cell21="{ row }">
      {{ row.product21 ? '✔️' : '❌' }}
      {{ row.product21 }}
      </template>

      <template #cell22="{ row }">
      {{ row.product22 ? '✔️' : '❌' }}
      {{ row.product22 }}
      </template>

      <template #cell31="{ row }">
      {{ row.product31 ? '✔️' : '❌' }}
      {{ row.product31 }}
      </template>

      <template #cell32="{ row }">
      {{ row.product32 ? '✔️' : '❌' }}
      {{ row.product32 }}
      </template>
    </vxe-grid>

</template>https://gitee.com/x-extends/vxe-table

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

劳暄美 发表于 2025-11-6 12:58:53

感谢分享，下载保存了，貌似很强大

背竽 发表于 2025-12-2 15:25:02

感谢分享，下载保存了，貌似很强大

捡嫌 发表于 2026-1-3 07:45:55

谢谢分享，试用一下

上官泰 发表于 2026-1-15 04:14:31

感谢，下载保存了

劳暄美 发表于 2026-1-17 03:25:58

鼓励转贴优秀软件安全工具和文档！

打阗渖 发表于 2026-1-20 22:44:13

谢谢分享，辛苦了

褥师此 发表于 2026-1-21 00:02:57

感谢分享

咚獭 发表于 2026-1-21 00:54:30

谢谢分享，辛苦了

垢峒 发表于 2026-1-25 12:02:57

东西不错很实用谢谢分享

慎气 发表于 2026-1-26 09:36:23

前排留名，哈哈哈

奄幂牛 发表于 2026-1-27 04:52:16

鼓励转贴优秀软件安全工具和文档！

龙骋唧 发表于 2026-1-29 05:23:54

感谢分享，下载保存了，貌似很强大

祝安芙 发表于 2026-2-6 09:01:48

yyds。多谢分享

王平莹 发表于 2026-2-7 04:45:01

鼓励转贴优秀软件安全工具和文档！

懵径 发表于 2026-2-8 08:23:27

分享、互助 让互联网精神温暖你我

羊舌正清 发表于 2026-2-8 09:47:43

谢谢分享，试用一下

老僻贞 发表于 2026-2-9 07:56:20

感谢发布原创作品，程序园因你更精彩

赫连如冰 发表于 2026-2-12 20:25:53

过来提前占个楼

查看完整版本: 如何使用 vue vxe-table 来实现一个产品对比表表格