0👍
I’ve worked today on a similar problem, making a very Dynamic table that renders different for each model but that has some columns, aka, v-slot:item.<name>
in common.
I have a common headers json object that has all the properties the table should render for each model, it looks something like this:
"headers": [
{ "text" : "Data / Hora" , "value" : "date" , "filterable" : true , "sortable" : true , "type" : "text-date" , "align" : "left" , "format" : "AAAA-MM-DD HH:MM" },
{ "text" : "Tipus pujada" , "value" : "upload_type" , "filterable" : true , "sortable" : false , "type" : "text" , "align" : "center" },
{ "text" : "Elements" , "value" : "elements" , "filterable" : true , "sortable" : false , "type" : "text" },
{ "text" : "Rebut i validat" , "value" : "status" , "filterable" : true , "sortable" : false , "type" : "chip" , "style": [ { "color" : "red", "value" : "ERROR" } , { "color" : "green" , "value" : "OK" } ] },
{ "text" : "Log" , "value" : "log" , "filterable" : false , "sortable" : false , "type" : "icon" , "icon": "mdi-magnify" , "event" : "click" , "action" : "openDialog" },
{ "text" : "Fitxer pujat" , "value" : "uploaded_file" , "filterable" : false , "sortable" : false , "type" : "icon" , "icon": "mdi-file" , "event" : "click" , "action" : "downloadJSONFileFromJSONData", "url" : "xxxxxxxx", "filename" : "AAAA-MM-DD-filename.json" }
]
So I can render all the columns that have the same header type like icon
or text
, chip
whatever as if they where the same.
To solve make it work without naming specifically for each header I’ve used computed properties that can filter the header slots by its types:
computed: {
computedHeaders: function () {
//Filters the headers of type Icon
return this.headers.filter(header => header.type==='icon');
}
}
so I can render all the slots that have something in common but different naming:
<template v-for="(head,i) in computedHeaders" v-slot:[`item.${head.value}`]="{ item }">
<v-icon
:key="i"
v-text="head.icon"
>
</v-icon>
</template>
- [Vuejs]-How to fix the following error on Laravel Homestead VM: errno -30 rofs EROFS: read-only file system, symlink '../@babel/parser/bin/babel-parser.js'?
- [Vuejs]-Import js file into Vue.js project
Source:stackexchange.com