Vue Js Element UI how to render array object in table column - javascript

For my Vue Js Element UI code, I want to display/traverse the array data in el-table-column but it's not rendering. String data is showing correctly only issue with the array. I have tried by putting the static data in data() return method also but it's not working for me. Please check below code what I have tried,
HTML
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="module" label="Module">
</el-table-column>
<el-table-column prop="status" label="Status">
</el-table-column>
<el-table-column prop="downloadfiles" label="Download Files"
v-for="(download,index) in tableData[0].downloadfiles[0]">
<el-table-column label="File" :prop="download.file"></el-table-column>
<el-table-column label="Path" :prop="JSON.stringify({download, property:'path'})"></el-table-column>
</el-table-column>
</el-table>
Script
data () {
return {
tableData: [{
"module": 'Order',
"status": "Ok",
"downloadfiles":
[{
"file": "test_20210406080352.zip",
"path": "/opt/var/log/download/"
},
{
"file": "New_20210406080352.zip",
"path": "/opt/var/log/download/"
}]
}],
}
}
I have tried to parse download node data in 2 ways but both the solution not working for me. Please help me how to traverse the array object in el-table-column.

You are selecting first item in downloadfiles array here tableData[0].downloadfiles[0] and you shouldn't.
It works like this:
<el-table-column
prop="downloadfiles"
label="Download Files"
v-for="(d, i) in tableData[0].downloadfiles"
:key="i"
>
<el-table-column label="File">
{{ d.file }}
</el-table-column>
<el-table-column label="Path">
{{ d.path }}
</el-table-column>
</el-table-column>
Full example here
If you don't need to use subcolumns then solution would be to use scoped slot in table column.
For example:
<el-table-column label="Download Files">
<template slot-scope="props">
<div
v-for="(f, i) in props.row.downloadfiles"
:key="i"
>
<el-link
:href="f.path + f.file"
icon="el-icon-download"
type="primary"
>
{{f.file}}
</el-link>
</div>
</template>
</el-table-column>
Full example here

Related

Adding checkbox in Django table

I am trying to create a checkbox table in Django that only allows the user to select only 1 value. The current code I have allows the user to select multiple checkboxes. May I know how do I disable that?
Also, how do I get the data for the selected rows in the table using javascript that is supposed to be passed into a function in views.py?
<doctor.html>
{% block mainbody %}
{% verbatim %}
<div id="app2" class="container">
<div class="emr-table">
<el-table
:data="list"
stripe
style="width: 100%">
<el-table-column :resizable="false" min-width="10px" :render-header="renderHeader" align="center">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.itemCheck"
#change="toggleCheck(scope.row)" max=1></el-checkbox>
</template>
</el-table-column>
<el-table-column
prop="id"
label="Index"
width="120">
</el-table-column>
<el-table-column
prop="patient_id"
label="Patient ID"
width="230">
</el-table-column>
<el-table-column
prop="ward_number"
label="Ward No."
width="130">
</el-table-column>
<el-table-column
prop="medication"
label="Medications">
</el-table-column>
<el-table-column
prop="date_assigned"
label="Date Assigned"
width="160">
</el-table-column>
<el-table-column
prop="time_assigned"
label="Time Assigned"
width="160">
</el-table-column>
</el-table>
</div>
<div class="filter-container">
<div class="filter-item">
<el-button #click="onAddMedicine">Add</el-button>
</div>
</div>
</div>
{% endverbatim %}
<script>
new Vue({
el: '#app2',
data() {
return {
list: []
}
},
mounted() {
this.getemrList()
},
methods: {
getemrList() {
// Obtain EMR list
axios.post(ToDJ('emrList'), new URLSearchParams()).then(res => {
if (res.data.code === 0) {
console.log(res.data.data)
this.list = res.data.data
} else {
this.NotifyFail(res.data.data)
}
})
},
// Success notification
NotifySuc(str) {
this.$message({
message: str,
type: 'success'
})
},
// Error notification
NotifyFail(str) {
this.$message({
message: str,
type: 'warning'
})
}
}
})
</script>
{% endblock %}
Output that I obtain:
I am new to web development. Would appreciate any advice. Thank you!

Vue.js - How to add an event after I dragged and changed the order of El_Table?

I am using element-ui-el-table-draggable to obtain the draggable effect.
My table is rendered by the following code, and can be dragged to change the order of the rows.
<p class="p-3" v-if="departmentlist">
<ElTableDraggable>
<el-table
stripe
class="table-responsive table"
header-row-class-name="thead-light"
:data="departmentlist"
#row-click="row_clicked_event">
<!-- <el-table-column label="ID" prop="IDn">
<template v-slot="{ row }">
{{ row.IDn }}
</template>
</el-table-column> -->
<el-table-column label="PLU" prop="PLU" :key="PLU"> </el-table-column>
<el-table-column :label="$t('Name') + '1'" prop="Name1" :key="$t('Name') + '1'">
</el-table-column>
<el-table-column :label="$t('Name') + '2'" prop="Name2" :key="$t('Name') + '2'">
</el-table-column>
<el-table-column :label="$t('Sort Order')" prop="SortOrder" :key="$t('Sort Order')">
</el-table-column>
<el-table-column :label="$t('Remarks')" prop="Remarks" :key="$t('Remarks')">
</el-table-column>
</el-table>
</ElTableDraggable>
</p>
<p class="p-3" v-else>
{{ $t("No Records") }}
</p>
However, every time the page is refreshed, the order will revert to its original state. This is because the 'Sort Order' has never been changed after I dragged and moved a row.
What can be done so that every time when a row is moved, I can call a method?

Trying to get row data onClick

I'm trying to get row data from this table when a row is clicked, specifically the ID. I'm able to do this already because I added the IDs to the rows and utilize event to get the row data that way. My issue is that if I click on one of the child (nested)rows, I need to know their IDs(already doing that with event) but I also need to know the ID of the parent row. So for example, if I click on the Test 320 row, the child row ID is 320 but how can we also know the parent row ID (2014 Golf -->5)?
How I'm getting the row IDs for the ones that get clicked:
this.rowId = event.target.parentNode.childNodes[1].innerHTML;
<input type="text" v-model="search" placeholder="Filter by Model or Trim" class="filter" />
<el-table :data="tableData" class="padded-table" height="600" style="width: 100%" row-key="id">
<el-table-column prop="name" label="TRIM" min-width="200"> </el-table-column>
<el-table-column prop="technical" label="TECHNICAL" min-width="80"> </el-table-column>
<el-table-column prop="customer_delivery" label="CUSTOMER DELIVERY" min-width="120"> </el-table-column>
<el-table-column prop="customer_acceptance" label="CUSTOMER ACCEPTANCE" min-width="120"> </el-table-column>
<el-table-column prop="off_the_truck" label="OFF THE TRUCK" min-width="80"> </el-table-column>
<el-table-column prop="vim" label="VIM" min-width="80"> </el-table-column>
</el-table>
el-table has a built-in row-click event. Just listen to row-click and do something with the returned item.
<template>
<el-table
:data="tableData"
#row-click="handleRowClick" // this line
class="padded-table"
height="600"
style="width: 100%"
row-key="id"
>
...
</el-table>
</template>
<script>
export default {
...
methods: {
handleRowClick(row) {
console.log(row);
}
}
}
</script>

How can I expand slots in v-data-table component in Vuetify?

Hello I am trying expand default v-data-table component from Vuetify to avoid code redundancy. I have few components with v-data-table. It works on the same principles but table headers can be different. I am using v-slots but how I can expand dynamic slots from Vuetify?
When I have to add custom html to one of column (eg. action) in table I am using:
<v-data-table
:headers="questionTableHeaders"
:items="questions.fetchedData"
class="elevation-1"
hide-default-footer
:page.sync="questions.pagination.page"
:items-per-page="questions.pagination.itemsPerPage"
:loading="loadingData"
loading-text="Loading..."
no-data-text="No data.">
<template v-slot:item.action="{ item }">
<v-icon
small
class="mr-2"
title="title"
#click="clickOnTheItem(item)">
fas fa-plus
</v-icon>
</template>
</v-data-table>
But sometime tables don't have column action. How I can prepare dynamic slots in my component dataTable expanded default v-data-table component to make sure that each of the headers passing to my component have a slot that I can use in parent component?
If I have headers:
[
{text: "text1", value: "name"},
{text: "text2", value: "hash"}
]
I can have access to slots item.name and item.hash?
<dataTable :url="examApiUrl" :headers="examTableHeaders">
<template v-slot:item.name="{ item }"></template>
<template v-slot:item.hash="{ item }"></template>
</dataTable>
But as I wrote before, headers can be different. How I can prepare slots in my dataTable component?
Try it
<v-data-table
:headers="questionTableHeaders"
:items="questions.fetchedData"
class="elevation-1"
hide-default-footer
:page.sync="questions.pagination.page"
:items-per-page="questions.pagination.itemsPerPage"
:loading="loadingData"
loading-text="Loading..."
no-data-text="No data.">
<template v-slot:item.action="{ item }">
<v-icon
small
class="mr-2"
title="title"
#click="clickOnTheItem(item)">
fas fa-plus
</v-icon>
</template>
<template v-for="(slot, name) in $scopedSlots" v-slot:[name]="item">
<slot :name="name" v-bind="item"></slot>
</template>
</v-data-table>

How to filter the table with Vue/Element-UI

I am using Vue in combination with Element UI and I would like to show only elements in my table, which have the status 0.
I get my data by using Express, Axios, which looks like that:
axios.get('http://127.0.0.1:8000/api/tools')
.then(response => {
console.log(response);
this.tools = response.data;
console.log(JSON.stringify(this.tools));
})
.catch((error) => {
console.log(error);
})
}
So everything works fine. I get all of my stuff listed but I wanted to have tabs, with different groups of items.
Because of that I can't filter it directly where I make the database access.
So I tought why not filter it directly in the tables.
So currently the header of my table looks like this:
<el-table
:data="tools.filter(data => !search || data.tool_name.toLowerCase().includes(search.toLowerCase()) || data.status == 0)"
border
fit
highlight-current-row>
And there you can see that I am already using a filter for my search bar.
I got it from the example in the Doc.
But I really have no idea how I can filter that I only get those elements, which "status" is == 0.
So I addet " || data.status == 0".
My columns looks like that:
<el-table-column align="center" label="Number" width="95">
<template slot-scope="scope">
{{ scope.row.tool_id }}
</template>
</el-table-column>
I hope someone have an idea!
Here the whole Table for better understanding:
<el-tab-pane label="Verfügbare Werkzeuge">
<el-input
placeholder="Werkzeug suchen..."
v-model="search"
class="search-form">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
<el-table
:data="tools.filter(data => !search || data.tool_name.toLowerCase().includes(search.toLowerCase()) || data.status == 0)"
border
fit
highlight-current-row>
<el-table-column align="center" label="Werkzeugnummer" width="95">
<template slot-scope="scope">
{{ scope.row.tool_id }}
</template>
</el-table-column>
<el-table-column label="Bezeichnung" width="120">
<template slot-scope="scope">
{{ scope.row.tool_name }}
</template>
</el-table-column>
<el-table-column class-name="status-col" label="Status" width="110" align="center">
<template slot-scope="scope">
<el-tag :type="scope.row.status | statusFilter">{{ scope.row.status | nameFilter }}</el-tag>
</template>
</el-table-column>
<el-table-column label="letzter Verantwortlicher" width="120">
<template slot-scope="scope">
{{ scope.row.used_by }}
</template>
</el-table-column>
<el-table-column align="center" prop="actual_return_time" label="letzte Rückgabe" width="150">
<template slot-scope="scope">
<i class="el-icon-time"/>
<span>{{ scope.row.actual_return_time }}</span>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
It looks like a problem in your filter logic. Maybe you want use your data.status == 0 logic clause with && binary operator
Edit: pay attention on using parentheses in your logic. Besides that, you could use === to test equality including the type

Categories

Resources