demand

O&m needs to display the command line query results in the front end of o&M. There are some special requirements on the interface. The implementation of some main functions is shared here.

  • 1. The front-end form interface is required to be dynamically generated to facilitate background modification
  • 2. Column values can be sorted (time comparison, value comparison……)
  • 3. Column values can be filtered (according to column value type……)
  • 4. Table data can be exportedExcel, the filename interface returns (because there are many modules) + the current time.
  • 5. Provide key column search function

implementation

  • The front-end interface is element-UI, and components are introduced on demand
  • The data is implemented by local mock, referring to the VUE local mock server requesting mock data

The table interface is dynamically generated

The table is mainly implemented by EL-Table. The main code is as follows

<el-table :data="tableShowData" :border="true" height="420" style="width: 100%">
  <el-table-column
    v-for="col in tableCols"
    :key="col.prop"
    :prop="col.prop"
    :label="col.label">
    <template slot-scope="scope">
      {{ scope.row[col.prop] }}
    </template>
  </el-table-column>
</el-table>
Copy the code

Want to dynamically generate tables, is mainly to agree with the background good transmission of data. The attributes of table header data COLs and list data should correspond well. Simulation data is as follows, generally according to the requirements to provide a good field, directly let the background according to this format on the line.

{" code ": 0," MSG ":" success ", "result" : {" cols ": [{" prop" : "date", "label" : "date"}, {" prop ":" name ", "label" : "Name"}, {" prop ":" address ", "label" : "address"}, {" prop ":" type ", "label" : "type"}], "data" : [{" date ": "2021-08-02", "name" : "little red", "address" : "Wang Zishan", "type" : "travel"}, {" date ":" 2021-08-06 ", "name" : "little wisdom", "address" : "Lean fish", "type" : "gourmet"}, {" date ":" 2021-08-03 ", "name" : "xiao Ming", "address" : "stone", "type" : "travel"}, {" date ": "2021-08-07", "name" : "small white", "address" : "like hin earthenware pot of porridge", "type" : "gourmet"}, {" date ":" 2021-08-04 ", "name" : "xiao li", "address" : "Vanilla world", "type" : "travel"}, {" date ":" 2021-08-08 ", "name" : "small 2", "address" : "tabun ovens fish", "type" : "gourmet"}, {" date ": "2021-08-05", "name", "yellow", "address" : "melting chong wen tour city", "type" : "travel"}, {" date ":" 2021-08-09 ", "name" : "small four", "address" : "Type ": "type"}]}Copy the code

So I get a table that looks like this

The column value sorting

El-table itself provides the ability to sort column values. We can just add sortable to el-table-column. In practice, it is necessary to configure which column can be sorted. In this case, add “sortable”: true or “sortable”: false to each colS of simulated data

For details, see the table.json file

So when you add the sort attribute, the table looks like this

The first three columns are set to true. Click the small arrow to view the list in ascending or descending order

The column value filter

Sometimes, column values come from categorical values, such as region, server type, state, and so on. That’s where screening comes in. El-table itself provides column value filtering. In this case, add an array of “filters”: [] to each of the simulated data’s COLs to hold the filters.

Notice here

  • Null by default means that columns are not filtered
  • filtersIt contains the text and value attributes of the filter. The value has to correspond to the column

For details, see the table.json file

Then follow the el-table document configuration

The table looks like this when you add the filter attribute

Note here that only non-empty filters are configured for the type column. Unconfigured filters should not appear with the filter arrow.

The column value filtering function of the el-table is controlled by a down arrow icon in the header of the table. This icon does not provide the function of showing and hiding, so columns that do not need to provide the column value filtering function will also display this icon. Here, the class name attribute of the el-table-column is used. Use vue style penetration :: V-deep to dynamically control the visibility of this icon. See the code below.

<el-table :data="tableShowData" :border="true" height="420" style="width: 100%"> <el-table-column v-for="col in tableCols" :key="col.prop" :prop="col.prop" :label="col.label" :filters="col.filters" filter-placement="bottom-end" :filter-method="filterTag" :sortable="col.sortable" :class-name="col.filters.length==0? 'hide-filter':'show-filter'"> <template slot-scope="scope"> {{ scope.row[col.prop] }} </template> </el-table-column> </el-table>Copy the code

The CSS

::v-deep .hide-filter { .el-table__column-filter-trigger { display: none ! important; } } ::v-deep .show-filter { .el-table__column-filter-trigger { display: inline-block ! important; }}Copy the code

After adjustment, the table looks like this

Table data export Excel

Export Excel code directly using the PanJiaChen family bucket project vue-element-admin code. There’s nothing to tell.

The main is the actual application, you can pass the file name in the interface data, easy to identify the download module. For example, here a filename field is defined in the simulated data.

Key column search capability

  • 1. Optional search column
  • 2. Enter the search content
  • 3. Search and reset

Search function, mainly used the array filter matching function, search is local data, the specific implementation of the code.

Also, in the actual application, it is necessary to configure which column can be searched. At this time, add a SearchCols array in the simulated data, which can be used to select the search column.

This is the final result

Code overview

The main files involved are as follows (specific reference code) :

| - public | - data | -- table. Json / / analog data | - SRC | - utils | -- Export2Excel. Js / / export Excel | - views | - | dynamicTableTest / / instance is - index. Vue | -- index. SCSS | -- index. JsCopy the code

code

Just look for the code in the code Overview directory.

conclusion

This module can be packaged as a component, or used in every page through mixins, which is relatively convenient.

thank you

PanJiaChen’s vue-Element-Admin family bucket project is the big dog of the VUE2 era, and its solution is worth considering for most mid-back office projects. Thanks for your contribution!