Here is my code snippet for generating a table:
<el-table :data="tableData" empty-text="No data to display :( " v-if="window.width > 855">
<el-table-column
v-for="column in tableColumnsMd"
:key="column.label"
:min-width="column.minWidth"
:prop="column.prop"
:label="column.label"
>
</el-table-column>
Javascript part:
data() {
return {
tableColumnsMd: [
{
prop: "name",
label: "Name",
minWidth: 150,
show:true,
},
{
prop: "status",
label: "Status",
minWidth: 200,
show:false,
},
{
prop: "registrationDate",
label: "Registration Date",
minWidth: 150,
show:false,
},
{
prop: "accountId",
label: "Account ID",
minWidth: 100,
show:false,
},
],
//synchronized data with the table
tableData: [],
};
},
Total number of columns: 4.
I would like to have a responsive design: if the screen width is less than 853px, then only display the first 3 columns or maybe show the first and last column instead.
Thank you!