Dashboard Card Rendering with Components

The dashboard card already supports multiple card types. If these card types still cannot meet your needs and you require highly customized cards, you can implement custom dashboard cards through the component designer.

The following example will explain how to implement a splitter card function using ElementUI.

Effect Diagram

Custom Component Definition

Create a component in the component designer and paste the following definitions into the corresponding sections to complete the component definition. All contexts within the card can be passed as parameters to the component for interaction according to business needs.

Component Library Dependency

This component depends on the ElementUI component library

Template

<div style="display:flex">
    <el-table :data="sub" :stripe="false" style="width:202px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-width:1px;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-style:solid;border-left-color:#FFC107;border-bottom-color:#FFC107;border-right-color:#FFC107;border-top-color:#FFC107" v-on:row-click="getSubject">
        <el-table-column prop="sub" label="Subject" width="200"></el-table-column>
    </el-table>
    <el-table :data="tableData" border :summary-method="getSummaries" show-summary stripe style="display:inline;top:-20px;flex-grow:4;margin-top:20px">
        <el-table-column prop="name" label="Name"></el-table-column>
        <el-table-column prop="subject" label="Subject" width="180"></el-table-column>
        <el-table-column prop="score" label="Score"></el-table-column>
    </el-table>
</div>

Script

export default {
  data() {
    return {
      // Average score
      avg: 100,
      // Subject list
      sub: [
        {
          sub: "All",
        },
        {
          sub: "Chinese",
        },
        {
          sub: "Math",
        },
        {
          sub: "English",
        },
      ],
      activeSub: null,
      // Data table source data
      tableDataOrigin: [
        {
          subject: "Chinese",
          name: "Zhang San",
          score: 88,
        },
        {
          subject: "Math",
          name: "Zhang San",
          score: 90,
        },
        {
          subject: "English",
          name: "Zhang San",
          score: 67,
        },
        {
          subject: "Math",
          name: "Li Si",
          score: 95,
        },
        {
          subject: "Chinese",
          name: "Li Si",
          score: 92,
        },
        {
          subject: "English",
          name: "Li Si",
          score: 94,
        },
      ],
    };
  },
  computed: {
    // Filtered data displayed in the table
    tableData() {
      if (this.activeSub === "All") {
        return this.tableDataOrigin;
      }
      return this.tableDataOrigin.filter((item) =>
        this.activeSub ? item.subject === this.activeSub : true
      );
    },
  },
  methods: {
    // Summary function to calculate average score
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "Average";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = (sums[index] / values.length).toFixed(2);
          sums[index] += " pts";
        } else {
          sums[index] = " ";
        }
      });

      return sums;
    },
    // Subject selection function
    getSubject(row, event, column) {
      this.activeSub = row.sub;
    }
  },
};

Add Dashboard Card

Create a Dashboard module or add a Custom Component card to any Dashboard module, then select the newly created component.