如何使用 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
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]