如何使用 vue vxe-table 來實現一個產品對比表表格

查看官網：https://vxetable.cn

效果

代碼

<template><div class="demo-page-wrapper"><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 }"><span v-if="hasCheckboxCell(row.product11)">{{ row.product11 ? '??' : '?' }}</span><span v-else>{{ row.product11 }}</span></template><template #cell12="{ row }"><span v-if="hasCheckboxCell(row.product12)">{{ row.product12 ? '??' : '?' }}</span><span v-else>{{ row.product12 }}</span></template><template #cell21="{ row }"><span v-if="hasCheckboxCell(row.product21)">{{ row.product21 ? '??' : '?' }}</span><span v-else>{{ row.product21 }}</span></template><template #cell22="{ row }"><span v-if="hasCheckboxCell(row.product22)">{{ row.product22 ? '??' : '?' }}</span><span v-else>{{ row.product22 }}</span></template><template #cell31="{ row }"><span v-if="hasCheckboxCell(row.product31)">{{ row.product31 ? '??' : '?' }}</span><span v-else>{{ row.product31 }}</span></template><template #cell32="{ row }"><span v-if="hasCheckboxCell(row.product32)">{{ row.product32 ? '??' : '?' }}</span><span v-else>{{ row.product32 }}</span></template></vxe-grid></div>
</template><script setup>
import { reactive } from 'vue'
import XEUtils from 'xe-utils'const gridOptions = reactive({border: true,loading: false,showOverflow: true,height: '100%',toolbarConfig: {refresh: true,zoom: true},columns: [{field: 'brand',title: '品牌',children: [{field: 'code',title: '型號',children: [{field: 'imgUrl',title: '圖片',children: [{field: 'describe',title: '價格'}]}]}]},{field: 'product1000',title: '大米科技',children: [{field: 'product1111',title: 'X6',children: [{field: 'product1110',title: '',slots: {header: 'img11'},children: [{field: 'product11',title: '4999',align: 'center',slots: {default: 'cell11'}}]}]},{field: 'product1211',title: 'X6 pro',children: [{field: 'product1210',title: '',slots: {header: 'img12'},children: [{field: 'product12',title: '5999',align: 'center',slots: {default: 'cell12'}}]}]}]},{field: 'product20',title: '遙先科技',children: [{field: 'product2111',title: 'Y8',children: [{field: 'product2110',title: '',slots: {header: 'img21'},children: [{field: 'product21',title: '8999',align: 'center',slots: {default: 'cell21'}}]}]},{field: 'product2211',title: 'Y8 plus',children: [{field: 'product2210',title: '',slots: {header: 'img22'},children: [{field: 'product22',title: '10999',align: 'center',slots: {default: 'cell22'}}]}]}]},{field: 'product30',title: '拼果科技',children: [{field: 'product3111',title: 'T7',children: [{field: 'product3110',title: '',slots: {header: 'img31'},children: [{field: 'product31',title: '7999',align: 'center',slots: {default: 'cell31'}}]}]},{field: 'product3211',title: 'T7 x',children: [{field: 'product3210',title: '',slots: {header: 'img32'},children: [{field: 'product32',title: '8999',align: 'center',slots: {default: 'cell32'}}]}]}]}],data: [{ id: 10000, describe: 'AI智能交互', product11: '基礎語音', product12: '神馬語音大模型', product21: '基礎語音', product22: '饕鬄語音大模型', product31: '基礎語音', product32: '宙斯語音大模型' },{ id: 10002, describe: '遠程控制', product11: true, product12: true, product21: false, product22: true, product31: false, product32: true },{ id: 10003, describe: '衛星通話', product11: false, product12: true, product21: true, product22: true, product31: false, product32: true },{ id: 10004, describe: '指紋解鎖', product11: true, product12: true, product21: true, product22: true, product31: true, product32: true },{ id: 10005, describe: '防水等級', product11: 'IP67', product12: 'IP68', product21: 'IP67', product22: 'IP68', product31: 'IP67', product32: 'IP68' },{ id: 10006, describe: '根據手機殼顏色換主題', product11: false, product12: true, product21: false, product22: false, product31: false, product32: false },{ id: 10007, describe: '水冷散熱', product11: false, product12: true, product21: false, product22: false, product31: false, product32: false },{ id: 10008, describe: '信號加強', product11: true, product12: true, product21: true, product22: true, product31: true, product32: true },{ id: 10009, describe: '藍牙通話', product11: false, product12: true, product21: true, product22: true, product31: true, product32: true },{ id: 10010, describe: '無線對講', product11: false, product12: true, product21: true, product22: true, product31: true, product32: false },{ id: 10011, describe: '重量', product11: '249克', product12: '282克', product21: '238克', product22: '256克', product31: '226克', product32: '244克' },{ id: 10012, describe: '屏幕分辨率', product11: '2k', product12: '4k', product21: '2k', product22: '4k', product31: '2k', product32: '2k' },{ id: 10013, describe: '拍照像素', product11: '5000萬', product12: '1億', product21: '5000萬', product22: '8000萬', product31: '3000萬', product32: '5000萬' },{ id: 10014, describe: '自動報警', product11: false, product12: true, product21: true, product22: true, product31: false, product32: true },{ id: 10015, describe: '無線支付', product11: true, product12: true, product21: true, product22: true, product31: false, product32: true },{ id: 10016, describe: '游戲模式', product11: true, product12: true, product21: true, product22: true, product31: true, product32: true },{ id: 10017, describe: '杜比音效', product11: false, product12: true, product21: true, product22: true, product31: true, product32: true },{ id: 10018, describe: '智能居家', product11: true, product12: true, product21: true, product22: true, product31: true, product32: true },{ id: 10019, describe: 'wifi8', product11: true, product12: true, product21: true, product22: true, product31: true, product32: true },{ id: 10020, describe: '無線充電', product11: true, product12: true, product21: true, product22: true, product31: true, product32: true }]
})const hasCheckboxCell = (cellValue) => {if (XEUtils.isBoolean(cellValue)) {return true}return false
}
</script>