I working on Vue3 with Quasar/cli.
How to make this category dividers (blue subtitles) with Quasar component qTable or qMarkupTable? screen
Ive tried to figure out body slots but I couldnt
Link to qTable API doc
https://quasar.dev/vue-components/table#introduction
Link to qMarkupTable API doc
https://quasar.dev/vue-components/markup-table#introduction
For QMarkupTable, add a row whose TD spans all the columns:
<q-markup-table>
<thead>
<tr>
<th>№</th>
<th>Name</th>
<th>Code</th>
<th>Diff</th>
</tr>
</thead>
<tbody>
<tr class="bg-primary text-white">
<td colspan="4">Medicines</td>
</tr>
<tr>
<td>1</td>
<td>Mukosolvan</td>
<td>101492</td>
<td class="text-negative">1</td>
</tr>
</tbody>
</q-markup-table>
QMarkupTable is a regular HTML table - it just applies the proper styling on it, everything else is the same HTML you've been studying as a student.
Related
I have seen few solutions online but It did not solve my problem. I am getting JSON object in the response.
<!-- Show Negativita Check Azienda -->
<table class="divide-y divide-gray-200 table-fixed w-full mt-4" v-if="showTableAzienda" v-for="item in impreses">
<thead class="bg-gray-900">
<tr>
<th>Codice Fiscale</th>
<th>Flag Domande</th>
<th>Flag Pregiudizievoli</th>
<th>Flag Procedure</th>
<th>Flag Protesti</th>
<th>Data Evasione</th>
</tr>
</thead>
<tbody class="text-center py-6" >
<tr>
<td>{{item.codice_fiscale}}</td>
<td>{{item.flagDomande}}</td>
<td>{{item.flagPregiudizievoli}}</td>
<td>{{item.flagProcedure}}</td>
<td>{{item.flagProtesti}}</td>
<td>{{item.dataEvasione}}</td>
</tr>
</tbody>
</table>
Here is JSON response
{
"codice_fiscale":"CLLLCA82R69D960T",
"flagDomande":"N",
"flagPregiudizievoli":"N",
"flagProcedure":"N",
"flagProtesti":"N",
"dataEvasione":"2021-11-04"
}
because the elements in the object are six. it generates th for six times with no output. if I print {{impreses.codice_fiscale}} then it shows the output. I am not able to understand behavior.
EDIT
Second Question
{"EventiNegativiPersona":
{"InfoPersona":
{"Nominativo":
{"#attributes":{"cognome":"","nome":""}},
"CodiceFiscale":"CLLLCA82R69D960T"},
"ElencoProtesti":{"#attributes":
{"flagPresenza":"N"}},"ElencoPregiudizievoli":
{"#attributes":{"flagPresenza":"N"}}}}
I would like to show these but {{item.EventiNegativiPersona.#parameters.so-on}} does not work because of #parameters. How can i show this?
Based on the response object shown in your question you could move the v-for to the td tag :
<table class="..." v-if="showTableAzienda" >
<thead class="bg-gray-900">
<tr>
<th>Codice Fiscale</th>
<th>Flag Domande</th>
<th>Flag Pregiudizievoli</th>
<th>Flag Procedure</th>
<th>Flag Protesti</th>
<th>Data Evasione</th>
</tr>
</thead>
<tbody class="text-center py-6" >
<tr>
<td v-for="item in impreses">{{item}}</td>
</tr>
</tbody>
</table>
I have table which have more rows:
This table start on new page and some rows are hidden (are not visible on next page).
I want to place table on previous page and hidden visible display to next page. I use DOMPDF 0.8.3.
I tried:
<table style"page-break-inside: auto;">
<tr style="page-break: auto">
<td>abc</td>
<td>cde</td>
</tr>
<tr style="page-break: auto">
<td>abc</td>
<td>cde</td>
</tr>
<tr style="page-break: auto">
<td>abc</td>
<td>cde</td>
</tr>
</table>
Do not know how to solve this, please?
I am trying to learn proper use of locators to find nested elements. Using a modified table from w3school (for illustration porpouses), what is a good way of collecting the row elements belonging to the tbody (while exclude those belonging to thead)?
I was thinking:
element(by.tagName('tbody')).element.all(by.tagName('tr'))
This does not work since a sublocator can not be a an elementArrayFinder (if I have understood correctly).
Is it possible to write:
element.all(by.css('tbody tr')) ?
(I will try that last tomorrow after a long day).
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>HTML Table</h2>
<table>
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>
</body>
</html>
For nested selection in Protrator, you have to all diretly to the previous all method call like,
element(by.tagName('tbody')).all(by.tagName('tr'))
Even you can use to select the deep child like this,
element(by.tagName('tbody')).all(by.tagName('td'))
Yes. by.css('tbody tr') is for finding element by css selector. Using them in element.all() will return all the element matching the css selector.
element.all(by.css('tbody tr'));
As it is tr a immediated child, you can try this as well,
element.all(by.css('tbody>tr'));
I'm using bootstrap and Vue.js for a webapp. But I can't use bootstrap table css in a Vue component. When I write
<table>
<tr class='active'>
<td>place</td>
<td>holder</td>
</tr>
</table>
outside Vue component the css works okay and the table is properly formatted. But when I use the same code within <template>...</tenplate> tag of the Vue component, the active style of bottstrap table css is not applied to the table row.
I am keeping the Vue component in a .vue file and compiling with webpack.
What's going wrong?
Adding a tbody element to the table solved the problem. The code now reads
<table>
<tbody>
<tr class='active'>
<td>place</td>
<td>holder</td>
</tr>
</tbody>
</table>
The CSS is working properly now.
I can see table working properly in Vue component. Following is code for table I am using:
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
Here is working fiddle.
How can I locate an element "1988" (the fourth line) in the following table:
<table border="0" width="820" cellpadding="2" cellspacing="0">
<tbody>
<tr valign="top">
<td class="default" width="100%">Results <b>1</b> to <b>10</b> of <b>1988</b></td>
</tr>
<tr valign="top">
<td class="default" bgcolor="#C0C0C0"> <font class="resultsheader"> ...etc
</tr>
</tbody>
</table>
IMPORTANT: I know one way that works (By.xpath):
driver.findElement(By.xpath("//td[#width='100%']")).getText();
However, this way does not ALWAYS work. The page is dynamic, so I need a way to locate that element no matter what changes happen to the page.
I tried the following but I am not sure:
By.xpath("//html//body//table//tbody//tr[3]//td//table//tbody//tr//td[2]//table[4]//tbody//tr[1]//td//b[3]"
If you can't change the HTML and want to use attributes for selection, you can write something like this:
//table[#border=0][#width=820]//tbody//tr[1]//td//b[3]