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

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

代码

1. <template>
2.   
3.     <vxe-grid v-bind="gridOptions">
4.       <template #img11>
5.         <vxe-image src="https://vxeui.com/resource/productImg/m11.jpg" width="100%"></vxe-image>
6.       </template>
8.       <template #img12>
9.         <vxe-image src="https://vxeui.com/resource/productImg/m12.jpg" width="100%"></vxe-image>
10.       </template>
12.       <template #img21>
13.         <vxe-image src="https://vxeui.com/resource/productImg/m21.jpg" width="100%"></vxe-image>
14.       </template>
16.       <template #img22>
17.         <vxe-image src="https://vxeui.com/resource/productImg/m22.jpg" width="100%"></vxe-image>
18.       </template>
20.       <template #img31>
21.         <vxe-image src="https://vxeui.com/resource/productImg/m31.jpg" width="100%"></vxe-image>
22.       </template>
24.       <template #img32>
25.         <vxe-image src="https://vxeui.com/resource/productImg/m32.jpg" width="100%"></vxe-image>
26.       </template>
28.       <template #cell11="{ row }">
29.         {{ row.product11 ? '✔️' : '❌' }}
30.         {{ row.product11 }}
31.       </template>
33.       <template #cell12="{ row }">
34.         {{ row.product12 ? '✔️' : '❌' }}
35.         {{ row.product12 }}
36.       </template>
38.       <template #cell21="{ row }">
39.         {{ row.product21 ? '✔️' : '❌' }}
40.         {{ row.product21 }}
41.       </template>
43.       <template #cell22="{ row }">
44.         {{ row.product22 ? '✔️' : '❌' }}
45.         {{ row.product22 }}
46.       </template>
48.       <template #cell31="{ row }">
49.         {{ row.product31 ? '✔️' : '❌' }}
50.         {{ row.product31 }}
51.       </template>
53.       <template #cell32="{ row }">
54.         {{ row.product32 ? '✔️' : '❌' }}
55.         {{ row.product32 }}
56.       </template>
57.     </vxe-grid>
58.   
59. </template>

复制代码

https://gitee.com/x-extends/vxe-table

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