Element UI table realizes drop-down filtering function

This article example shares the specific code for implementing drop-down filtering in the element UI table for your reference. The specific content is as follows

1. In default-sort, prop passes in the field to be sorted (data returned by the interface or defined by yourself), and order represents the sorting, and descending order is used here
2. In the filters object, text represents the filter text displayed on the page, and value represents the value used for filtering. In the method, filterHandler is used
3. Column key. If you need to use the filter-change event, this attribute is required to identify which column is the filter condition (bound to the field to be sorted in the interface)
4. Whether the data filtering options are multiple selections (multiple means whether to query multiple items)
5. filter-methods: The method used for data filtering. If it is a multiple-select filter item, it will be executed multiple times for each data, and any one that returns true will be displayed. Parameters are value, row, column

<template>
<el-table
        :data="tableData"
        style="width: 100%"
        empty-text="No data yet"
        ref="filterTable"
      >
        <el-table-column
          prop="deviceType"
          label="Device Type"
          show-overflow-tooltip
          column-key="deviceType"
          :filters="[
            { text: 'Weather equipment', value: 1 },
            { text: 'Emotional equipment', value: 0 },
          ]"
          :filter-method="filterHandler"
          :filter-multiple="true"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.deviceType == 1">Weather monitoring equipment</span>
            <span v-if="scope.row.deviceType == 0">Collapse monitoring equipment</span>
            <span></span>
          </template>
        </el-table-column>
      </el-table>
</template>

methods: {
// Header filtering event filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    }
     }

Data Types

Page Effects

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.