Questions about the dashboard 2 template table

Dashboard
,
1

I'm writing a program that shows these values in the table and shows the monitoring panel of the device when DeviceID is selected.

The DB outputs the location value and DeviceID.
with this query.

var query = "SELECT DISTINCT location, deviceID FROM devicelist;";

msg.topic=query;

return msg;

The output values are as follows.

[{"location":"1","deviceID":1},
{"location":"1","deviceID":2},
{"location":"1","deviceID":3},
{"location":"1","deviceID":4},
{"location":"1","deviceID":5},
{"location":"1","deviceID":6},
{"location":"1","deviceID":7},
{"location":"1","deviceID":8},
{"location":"1","deviceID":9},
{"location":"1","deviceID":10}]

I want to create an interior table structure in the table using the "b-table" of "vue bootstrap".

What I want to do is to separate and output the location ID, and if I click the location ID, I will output the DeviceID table with the same location ID.
In other words, if you click on a row with location=1 in the table, all DeviceIDs with location 1 will be output as another table. (using "row-details slot")

So far, I've only written template nodes that handle msg.payload, which is the result I got from the DB. Below is the corresponding code.

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Location</th>
          <th>Device ID</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.deviceID">
          <td>{{ item.location }}</td>
          <td>{{ item.deviceID }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: ['msg'],
  computed: {
    data() {
      return this.msg.payload;
    }
  }
};
</script>

I only see one common location value here, and when I click the location value, I would like to re-output the DeviceID table with the locationID that I clicked on, as shown below.

img
img2626×1046 167 KB

2

Just to understand - you're looking to build nested tables? The top level table the locations and then the nested table each of the devices at that location?

3

That's right. If you click the location=n line, you want the deviceID of "Devices" with "location=n" to be output.

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.