Element el-Table Indicates the secondary encapsulation of the table

Content of the background

The management background system developed by the company needs to use a large number of table data, and the content of each page is roughly the same. In order to facilitate the later maintenance, the el-Table is considered to be encapsulated and the common part of the content is extracted. In the later stage, only the table content can be maintained.

Techniques used:

• vue
• Element-ui

Package content

In simple terms, the display of the attribute data in the el-table is passed in by the parent component, which can be customized.

The official El-Table component

• Table properties:

  Common attributes of the project: data, display table data;

  Height: Defines the height of the table.

  Stripe: The table contains zebra stripes.

  Filter-multiple: specifies whether to select multiple data filtering options.

• Tabular method:

  Row-class-name: the className callback method used to color highlight the specified row.

  Sort-change: This event is triggered when the sorting condition of a table changes.

  Filter-change: This event is triggered when the table filtering conditions change.

Packaging form

<el-table 
    ref="filterTable"
    :row-class-name="tableRowClassName"
    border 
    v-loading="loading"
    element-loading-background="Rgba (0, 0, 0, 0.8)"
    :data="tableData" 
    :height="height || undefined"
    :max-height="height || undefined"
    :cell-style="cellStyle"
    :default-sort = "{prop: 'id', order: null}"
    @sort-change="sortChange"
    @filter-change="handleFilterChange"
    style="width: 100%">
    <template v-for="(item, index) in columns">
      <el-table-column
        :show-overflow-tooltip="true"
        v-if="item.show ! = false" 
        :key="index"
        :sortable="item.sortable"
        :prop="item.prop"
        :label="item.label"
        :align="item.align ? item.align : 'left'"
        :width="item.width"></el-table-column>
        <template v-for="(filter, index) in item.filterColums">
            <! Table inline dropdown style -->
          <el-table-column
            v-if="filter.type == 'select' && filter.show ! = false"
            :label="columnLabel[index]"
            :key="filter.lable"
            :prop="filter.prop"
            :show-overflow-tooltip="true"
            :fixed="filter.fixed ? filter.fixed : false"
            :width="filter.width ? filter.width : ''"
            :filter-multiple="multiple"
            :filters="filter.filtersList"
            :filter-method="filterMethod"
            :column-key="filter.prop">
            <template slot-scope="props">
              <el-select
                class="select-row"
                v-if="filter.part == 'sell'"
                v-model="props.row.sell_id"
                placeholder="Please select"
                @change="filterChange(props.row)"
                style="height: 25px;">
                <el-option
                  v-for="filter in filtersList"
                  :key="filter.id"
                  :label="filter.realname"
                  :value="filter.id"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
        <! -- Solt custom column -->
        <template v-if="item.type === 'slot'">
          <el-table-column 
            :key="index"
            :width="item.width"
            :prop="item.prop"
            :label="item.label">
            <template slot-scope="scope">
               <slot :name="item.slotType" :row="scope.row" />
            </template>
          </el-table-column>
        </template>
    </template>
    <! Table action button -->
    <el-table-column 
      v-if="tableOption && tableOption.label" 
      :width="tableOption.width" 
      :label="tableOption.label" 
      fixed="right"
      align="center" 
      class-name="small-padding fixed-width">
      <template slot-scope="scope">
        <el-button  
          v-for="(item,index) in tableOption.options" 
          :key="index" 
          :type="item.type" 
          :icon="item.icon" 
          v-show=! "" scope.row.validStatus"
          @click="handleButton(item.methods,scope.row)" 
          size="mini">
          {{item.label}}
        </el-button>
      </template>
    </el-table-column>
</el-table>
Copy the code

In my project, there are several cases that need to use the drop-down box in the table, so I made a different encapsulation of type == ‘select’ here. Usually, custom columns can meet the requirements, and the specific situation can be adjusted according to your own project

The next step is to expose the data contents of the table for the parent component to pass the data. As follows:

props: {
    tableData: Array.tableOption: Object.filterColums: Array.columns: Array.tableRowClassName: Function.loading: Boolean.filtersList: Array.filtersRoleList: Array.columnLabel: Array.filterMethod: Function.cellStyle: Function.refTable: String.multiple: {
      type: Boolean.default: false
    },
    // Monitor height
    listenHeight: {
      type: Boolean.default: true}},Copy the code

After the data is exposed, expose the method to the parent component as follows:

methods: {
    handleButton(methods, row, event) {
      this.$emit('handleButton', {'methods':methods,'row':row })
    },
    filterChange (row) {
      this.$emit('filterChange', row)
    },
    filterRoleChange (row) {
      this.$emit('filterRoleChange', row)
    },
    handleFilterChange (filters) {
      this.$emit('handleFilterChange', filters)
    },
    sortChange (filters) {
      this.$emit('sortChange', filters)
    },
    switchChange (row) {
      this.$emit('switchChange', row)
    },
    rowClick (type, value) {
      this.$emit('rowClick', type, value)
    },
}
Copy the code

Above, the table has been packaged, let’s start to use it in the project ~

Page using

 <Table
  :loading="loading"
  :tableData="tableData"
  :table-option="tableOption"
  :columns="tableColumns"
  :columnLabel="softwareLable"
  :filtersList="softwareFiltersList"
  :cellStyle="cellStyle"
  @handleFilterChange="handleFilterChange"
  @handleButton="handleButton">
  <template #enable="scope">
    <el-switch
      active-color="# 239656"
      inactive-color="#e86161"
      v-model="scope.row.enable"
      @change="changeSwitch(scope.row, 'enable')">
    </el-switch>
  </template>
</Table>
Copy the code

// tableColumns.js
export const tableColumns = [
  { prop: 'id'.label: 'ID'.width: 70 },
  { prop: 'name'.label: 'name' },
  { prop: 'description'.label: 'description'},
  {
    show: false.filterColums:[
      { 
        prop: 'software_name'.label: 'Applicable Software'.type: "text".filtersList: [{text: Software '1'.value: 1
          },
          {
            text: Software '2'.value: 2
          },
          {
            text: 'software 3'.value: 3
          },
          {
            text: 'software 4'.value: 4
          },
          {
            text: 'software 5'.value: 5}]},}, {prop: 'price'.label: 'price'},
  { prop: 'price_range'.label: 'Price range'},
  { prop: 'scale'.label: 'coefficient'},
  { show: false.prop: 'enable'.label: 'available'.type: 'slot'.slotType: 'enable'},]export const tableOption = {
  label: 'operation'.width: '120'.options: [{label: ' '.type: 'text'.icon: 'el-icon-edit-outline'.methods: 'edit' },
    { label: ' '.type: 'text'.icon: 'el-icon-delete'.methods: 'delete']}},Copy the code

<script>
import Table from '@/components/myTable/index'
import { tableColumns, tableOption } from './tableColumns'
export default {
  components: {
    Table
  },
  data() {
    return {
      loading: false.tableData: [].tableOption: tableOption,
      tableColumns: tableColumns,
      softwareLable: ['software'].softwareFiltersList: [].}},methods: {
    getTableData () {
      // Obtain interface data information
    },
    cellStyle () {
      // Table inline style
    },
    handleFilterChange () {
      // Table filter method
    },
    handleButton () {
      // table operatingmethod
    },
    changeSwitch () {
      // Switch operation method
    }
  },
}
</script>
Copy the code

Above, the complete project can be presented. Some corresponding method operations can be added. Packaging is not perfect, what good method to welcome everyone to discuss ~