Insert Image Into QTable Based on Field Value
-
Can somebody please provide a concrete example of how scoped slots work with QTables to insert an image into a cell based on the value of a given field? I understand how to implement a simple QTable, I understand how to use Vue methods and v-model to bind values to elements and display the output of methods, I sort of understand scoped slots, and I see that QTable has a bunch of APIs for scoped slots, but it’s still not clear how to tie all these concepts together
Here’s a relatively close example of the kind of table I’m trying to create:
http://tabulator.info/images/tabulator_share.png
But I really only need to understand how to accomplish the “Rating” and “Driver” column functionality to insert those icons based on the value of their corresponding fields in the QTable data model.
I appreciate anybody who can help me understand these concepts better.
-
@Julia you will have to make use of the
bodyor other body related slots to customize how your table’s rows/columns are displayed. take a look in my samples https://codesandbox.io/s/q306jwnjx6 click “home” -> “Table”. -
That’s a really nice demo, thank you! It should help a lot. I think your demos should be added to the official QTable page.
-
@metalsadman I’ve spent many hours studying the table example. I see how the component works in general now, but it doesn’t show how to insert images in a cell based on a field value. It only shows the premade “QRating” component. So, those stars are simply generated automatically from the “rating” field value, which is neat, but it’s not what I’m trying to accomplish.
Can you please show an example of a plain vanilla list table with no other distracting code that simply illustrates how to insert an image based on a field value? My primary goal is to have one cell that displays a status .png file based on a “status” field value.
For example, the status field value could have the following values:
- white
- yellow
- red
- green
Then based on the status field value, a corresponding <color>.png file from the statics/images folder is displayed in a cell.
I think this will be widely appreciated by many people if you can provide this example here and in the docs.
-
@Julia - But that would be offering a fish. We want to teach you how to fish.
And, @metalsadman 's example gives you everything you should need to know. If you don’t understand, then you need to learn more about Vue’s slotting capabilities.
https://vuejs.org/v2/guide/components-slots.html
Nonetheless, here is a simpler example.
https://codepen.io/smolinari/pen/pmVvrK
I used QBadge in the slot, but you can insert an image and use a method to determine the image you want.
Scott
-
a read on conditional rendering too if i may add https://vuejs.org/v2/guide/conditional.html. since the framework assume devs have a bit of knowledge in how vue works, it is good to have both quasar & vue docs on you at all times. worked for me, since I wouldn’t have tried Vue if not for Quasar (well not just vue, underlying tech that the framework uses too xD).
-
I would have thought conditional rendering would be better in situations, where their needs to be a swap out of the element or component, depending on whatever is happening within the page, like for user interactivity. But, yeah. you could use v-ifs to determine what to show too. I think it would be a bit more verbose or rather “less clean” though.
I’m a fan of putting as little logic in the templates as possible.Oh, and if you are going to be using this kind of image swap technique in other areas of your app, you really should create your own component and then you could even use computed props.
And if all of that is making your head spin, I’d like to invite you to take this course on Vue: https://www.udemy.com/vuejs-2-the-complete-guide
Scott
-
Thank you. I’m studying as much as I can. I’ve made a lot of progress on various parts of my app since my last post and slots are beginning to make more sense. I think your new example and commentary from you both should help. Thank you!
