Element sample code to implement dynamic table

【Code background】
【Code Implementation】

#1# -> The basis of code reuse is that you need a reusable component
#2# -> Use dynamic table components on the display page
#3# -> How to dynamically add sequence columns/index columns to dynamic tables according to needs

【Code background】

There is a business demand scenario where there are about a dozen tables belonging to a certain category. Users want to display different tables on the same page by selecting different query indicators. The header styles of these tables are similar but not exactly the same. How to do it?

So far, all table styles based on Element UI are hard-coded directly on the page, like the official one:

<el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
</el-table>

To solve the above problem, the simplest and most violent way is to write a separate component for each table, and then use the select box to trigger events to switch different component routes to render the page. Of course, this method is stupid and does not conform to the basic principle of code reuse. So in order to be lazy and adhere to the basic principle of code reuse, I started to think about whether there is a better way to solve this problem.

Take a close look at this <el-table>. The table data is bound through :data, and the table header data is displayed through the <el-table-column> tag. Can the header data also be combined with v-for through some kind of parameter passing method to render the specific data of <el-table-column>? With the help of Baidu, some experts have indeed done this and realized the dynamic table. The reference link is at the bottom. I would like to express my special thanks to the experts who shared their knowledge for free. Knowledge is priceless and learning has no end.

The specific implementation code of this project is recorded as follows, and some code annotations are improved to try to help understand it.

【Code Implementation】

#1# -> The basis of code reuse is that you need a reusable component

Create two new components in the /components/Table folder

DynamicTable.vue

<template>
  <!-- Dynamic display table -->
  <el-table :data="tableData" border stripe :height="height" @row-click="handleRowClick">
    <!-- v-for loop to get header data -->
    <template v-for="item in tableHeader">
      <table-column v-if="item.children && item.children.length" :key="item.id" :column-header="item" />
      <el-table-column v-else :key="item.id" :label="item.label" :prop="item.prop" align="center" />
    </template>
  </el-table>
</template>

<script>
  import TableColumn from '@/components/Table/TableColumn'
 
  export default {
    name: 'DynamicTable',
    components:
      TableColumn
    },
    props: {
      // Table data tableData: {
        type: Array,
        required: true
      },
      // Multi-level table header data tableHeader: {
        type: Array,
        required: true
      },
      // The height of the table: {
        type: String,
        default: '300'
      }
    },
    methods: {
      // Row click event handleRowClick (row, column, event) {
        // console.log(row)
        // console.log(column)
        // console.log(event)
        // Notify the parent component of the row-click event // row is passed as a parameter this.$emit('row-click', row)
      }
    }
  }
</script>

TableColumn.vue

<template>
  <el-table-column
    :label="columnHeader.label"
    :prop="columnHeader.label"
    align="center"
  >
    <!--columnHeader corresponds to: column-header-->
    <template v-for="item in columnHeader.children">
      <tableColumn
        v-if="item.children && item.children.length"
        :key="item.id"
        :column-header="item"
      />
      <el-table-column
        v-else
        :key="item.name"
        :label="item.label"
        :prop="item.prop"
        align="center"
      />
    </template>
  </el-table-column>
</template>
 
<script>
  export default {
    name: 'TableColumn',
    props: {
      columnHeader: {
        type: Object,
        required: true
      }
    }
  }
</script>
 
<style scoped>
 
</style>

A few important notes:

(1) The parameters passed in the table header are mainly divided into two categories: with children nodes and without children nodes, as shown in the following figure

Please note that the children node is used to complete the rendering of complex headers. For example, the final header rendering style of the above example is as follows:

So the question is, <el-table-column> is the tag of <el-table>, so what is this <table-column>?

(2) DynamicTable.vue calls TableColumn.vue component

DynamicTable.vue passes the header information with children nodes to TableColumn.vue through :column-header. After receiving this node information, TableColumn.vue mainly does the following two things:

First: Render a label tag through <el-table-column>

Second: Continue to determine whether the node has children nodes

=> If there is a children node, continue to render through <table-column>, continue to pass this child node to the TableColumn.vue component, and repeat the above steps

=> If there is no children node, it means this is a terminal node and ends with <el-table-column> rendering

#2# -> Use dynamic table components on the display page

<template>
  <div class="demo">
    <el-card>
      <!--Query area-->
      <el-row :gutter="10">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <span style="margin-right: 10px">Selection box -</span>
            <el-select
              v-model="specified_table"
              placeholder="Please select"
            >
              <el-option
                v-for="item in options"
                :key="item.zb_code"
                :label="item.zb_name"
                :value="item.zb_code"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-button type="primary" plain @click="handleQueryClick">Query</el-button>
          </div>
        </el-col>
      </el-row>
      <!--Table area-->
      <dynamic-table
        v-if="dynamicTableShow"
        :table-data="tableData"
        :table-header="tableHeaders"
        :height="'550px'"
      />
    </el-card>
  </div>
</template>

<script>
  // Import components import DynamicTable from '@/components/Table/DynamicTable'
  // Get table header information import { getTableHeader02_1, getTableHeader02_2, getTableHeader02_3, getTableHeader02_4 } from '@/api/table-header'
 
  export default {
    name: 'Index',
    components: { // Component registration DynamicTable
    },
    data () {
      return {
        // -- Query ----------------------
        options: [
          // { zb_name: 'Indicator name', zb_code: 'Indicator code' }
        ],
        specified_table: '', // Index value// -- Table---------------------
        dynamicTableShow: true, // DynamicTable component re-renders variables // Table header data tableHeaders: [],
        // Table data tableData: []
      }
    },
    created () {
      // api - get the drop-down box data of the indicator getSpecifiedTable().then(res => {
        this.options = res.data
      })
    },
    methods: {
      // Check if the value is in the array isExistArr (arr, val) {
        return arr.includes(val)
      },
      // Re-render the table refreshTable (zb_code) {
        // Get label value according to value const obj = this.options.find((item) => {
          return item.zb_code === zb_code
        })
        console.log(zb_code)
        console.log(obj.zb_name)
        // Set dynamicTableShow to false so that the DynamicTable component re-renders this.dynamicTableShow = false
        // Render different table headers according to different indicators const TBArr01 = ['M01', 'M02', 'M03', 'M05'] // Category 1 table const TBArr02 = ['M04', 'M07', 'M08', 'M12'] // Category 2 table const TBArr03 = ['M09', 'M10', 'M11'] // Category 3 table const TBArr04 = ['M06'] // Category 4 table if (this.isExistArr(TBArr01, zb_code)) {
          this.tableHeaders = getTableHeader02_1(obj.zb_name) // Rendering header style 1
        }
        if (this.isExistArr(TBArr02, zb_code)) {
          this.tableHeaders = getTableHeader02_2(obj.zb_name) // Rendering header style 2
        }
        if (this.isExistArr(TBArr03, zb_code)) {
          this.tableHeaders = getTableHeader02_3(obj.zb_name) // Rendering header style 3
        }
        if (this.isExistArr(TBArr04, zb_code)) {
          this.tableHeaders = getTableHeader02_4(obj.zb_name) // Rendering header style 4
        }
        // api - get table datagetTableList02(zb_code).then(res => {
          this.tableData = res.data
        })
        // The DOM has not been updated yet, the code here is required this.$nextTick(() => {
          // DOM is now updated this.dynamicTableShow = true
        })
      },
      // Click [query] event handleQueryClick () {
        const zb_code = this.specified_table
        // Check that the query condition cannot be empty if (zb_code === '' || zb_code === undefined) {
          this.$message.warning('Indicator cannot be empty!')
        } else {
          console.log('zb_code: ' + zb_code)
          // Re-render the header and table this.refreshTable(zb_code)
        }
      }
    }
  }
</script>

Using the dynamic table component is relatively simple. The only thing you need to pay attention to is that you must add the following code when rendering the table header and data, otherwise the page will not be rendered as expected.

this.$nextTick(() => {
    // DOM is now updated this.dynamicTableShow = true
})

For more information about this.$nextTick(), please refer to the official website: https://cn.vuejs.org/v2/guide/reactivity.html

#3# -> How to dynamically add sequence columns/index columns to dynamic tables according to needs

In the Element UI official example, if you need to add a serial number column or index column to the table, it is very simple. Just declare a special <el-table-column> in <el-table>.

<el-table-column type="index" width="50"></el-table-column>

So how do you add a serial number column in a dynamic table component? What's more, what if you add it or not according to your needs?

First, let's transform DynamicTable.vue

Like the official example, we first declare an <el-table-column> in <el-table>

<el-table-column v-if="isIndex" type="index" width="100" label="Serial number" align="center" />

Note that there is a v-if bound to an isIndex value, which is the key value we need to pass in the parent component.

Declare isIndex as Boolean type in props

 props: {
      // Table data tableData: {
        type: Array,
        required: true
      },
      // Multi-level table header data tableHeader: {
        type: Array,
        required: true
      },
      // The height of the table: {
        type: String,
        default: '300'
      },
      // Do you need to add a serial number column isIndex: {
        type: Boolean
      }
}

When using components on the display page, pass in the specified parameters through :is-index

 <dynamic-table
        v-if="dynamicTableShow"
        :table-data="tableData"
        :table-header="tableHeaders"
        :height="'550px'"
        :is-index="true"
/>

When the header of the same page needs to be switched, the above writing method is easy to display a separate serial number column when the page is initialized, as shown below, which is very unsightly

I hope the serial number column can be loaded at the same time as other normal columns when the table header is rendered. This can be done like this

<dynamic-table
        v-if="dynamicTableShow"
        :table-data="tableData"
        :table-header="tableHeaders"
        :height="'550px'"
        :is-index="isAddIndex"
/>

Change the original constant "true" to a variable isAddIndex, and then change its value to true when the header rendering is completed.

 this.isAddIndex = true

This way the ordinal column can be rendered at the same time as other normal columns.

【References】

https://www.jianshu.com/p/9c4ba833658f

https://www.cnblogs.com/llcdxh/p/9473458.html

This is the end of this article about the sample code for implementing dynamic tables in Element. For more relevant Element dynamic table content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Detailed explanation of Vue+Element's dynamic form, dynamic table (backend sends configuration, front-end dynamically generates)
Example code for implementing dynamic column filtering in vue+element table
Steps to dynamically merge tables in element
Vue+element creates dynamic forms and dynamically generates rows and columns of tables
Sample code for dynamic merging of elementUI table
Detailed explanation of the writing method of VUE2.0+ElementUI2.0 table el-table loop dynamic column rendering
Element UI table dynamic column displays blank bug fix method

<<: Solve the problem that the CentOS7 virtual machine cannot access the Internet and set up the CentOS7 virtual machine to use a static IP to access the Internet

>>: MySQL randomly extracts a certain number of records