Adding checkbox in Django table

I want to create a checkbox table in Django that I can click and confirm. After which, the data will be posted into javascript to be sent to a python function. I have tried different methods but can't seem to work.

<doctor.html>

{%extends "doctor.html" %}

{% block emr %}active{% endblock %}

{% block mainbody %}

{% verbatim %}

<div id="app2" class="container">
  <div class="department-table">
    <el-table
      :data="list"
      stripe
      style="width: 100%">
      <el-table-column
        prop="id"
        label="Index"
        width="180">
      </el-table-column>
      <input type="checkbox">
      <el-table-column
        prop="name"
        label="Department"
        width="180">
      </el-table-column>
      <el-table-column
        prop="registration_fee"
        label="Registration Fee">
      </el-table-column>
      <el-table-column
        prop="doctor_num"
        label="Staff Count">
      </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.getDepartmentList()
    },
    methods: {
      getDepartmentList() {
        // Obtain department list
        axios.post(ToDJ('departmentList'), 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. Hope that someone can assist. Thank you!

Back to Top