Develop Reference

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?

Is there a way to make Vuetify v-carousel move to the next item on scroll?

I'm trying to build a front page using the v-carousel and would like to scroll to the next item instead of using arrows or delimiters, how would I achieve that?
Here is my code at the moment
<template>
<v-carousel vertical-delimiters
:vertical="true"
:cycle="true"
height="100%"
>
<v-carousel-item >
<v-sheet
color="black"
height="100%"
tile
>
<v-container
fill-height
fluid
>
<v-row
align="center"
justify="center"
dense
class ="ma-0"
>
<v-col
align="center"
justify="center"
>
<v-img src="imagepath"
max-height="350"
max-width="350"
class="ma-10"
>
</v-img>
<div class="text-h4 pa-7">
Some text
</div>
</v-col>
</v-row>
</v-container>
</v-sheet>
</v-carousel-item>
<v-carousel-item>
<v-sheet
color="black"
height="100%"
tile
>
<v-container
fill-height
fluid
>
<v-row
align="center"
justify="center"
dense
class ="ma-0"
>
<v-col
align="center"
justify="center"
>
<v-img src="Image Path"
max-height="350"
max-width="350"
class="ma-10"
>
</v-img>
<div class="text-h4 pa-7">
Some text
</div>
</v-col>
</v-row>
</v-container>
</v-sheet>
</v-carousel-item>
</v-carousel>
</template>
The carousel works just fine, but I can't find a way to send scroll event to the carousel as a an event to move to the next item.

I think you could wrap your carousel into Intersection observer so you could observe the scroll event and after that, you will be able to call the function which can handle the carousel.
e.g. you have to provide a v-model for the <v-carousel> then after tracking the scroll event you can increase or decrease the amount of that v-model.
Another way could be the use of scroll directive. The v-scroll directive allows you to provide callbacks when the window, specified target, or the element itself (with .self modifier) is scrolled.

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

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

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