I'm new to Element Plus and have a little problem using el-table. Can anyone with experience using Element Plus give me an idea or something? I use VueJS and Element Plus. Thanks everyone in advance.
My data:
[ { no: "F", type: "Approval", name: "Master", status: "Approved", processDate: "01-01-2024 10:22", comment: "Helloo world!" }, { no: "G", type: "Approval", name: "Master", status: "Rejected", processDate: "01-01-2024 10:22", comment: "Comment content 1" }, { no: "H", type: "Draft", name: "Master", status: "Rejected", processDate: "01-01-2024 10:22", comment: "Comment content 2" }]Original code:
<table class="w-full"><thead class="sticky top-0"><tr class="title text-center bg-indigo-200"><th class="p-10">No</th><th class="p-10">Type</th><th class="p-10">Name</th><th class="p-10">Status</th><th class="p-10">Process Date</th></tr></thead><tbody class="overflow-y-auto h-96"><template v-for="(item, index) in props.approvalData" :key="index"><tr class="content-info text-center"><td class="px-6 py-2">{{ item.no }}</td><td class="px-6 py-2">{{ item.type }}</td><td class="px-6 py-2">{{ item.name }}</td><td class="px-6 py-2">{{ item.status }}</td><td class="px-6 py-2">{{ item.processDate }}</td></tr><tr v-if="item.comment" class="content-cmt bg-gray-100"><td class="px-6 py-2"></td><td class="px-6 py-2 text-center">Comment</td><td class="px-6 py-2" colspan="4">{{ item.comment }}</td></tr></template></tbody></table>Expected results:enter image description here
<el-table :data="tableData" style="width: 100%"><el-table-column prop="no" label="No"></el-table-column><el-table-column prop="type" label="Type"></el-table-column><el-table-column prop="name" label="Name"></el-table-column><el-table-column prop="status" label="Status"></el-table-column><el-table-column prop="processDate" label="Process Date"></el-table-column><el-table-column prop="comment" label="Comment"></el-table-column></el-table>