Element Table表格篩選功能二次封裝

一、話不多說  上才藝^_^

 

二、對於各位大佬來說說多的都是廢話，接下來直接上代碼

1.HTML代碼 組件

<template>
  <div style="display: flex;align-items: center;flex-wrap: wrap">
    <!-- 是否排序 -->
    <p
      v-if="condition.sortAbled"
      class="div-inBlock"
      style="cursor:pointer;display:inline-block;height:100%;"
      @click.stop="changeOrder(condition,column)"
    >
      <span>{{ condition.title }}</span>
      <span class="caret-wrapper">
        <i
          class="sort-caret ascending"
          :style="{'border-bottom-color':sortOrder === 'asc' ? '#409eff' : '#c0c4cc'}"
        />
        <i
          class="sort-caret descending"
          :style="{'border-top-color':sortOrder === 'desc' ? '#409eff' : '#c0c4cc'}"
        />
      </span>
    </p>
    <p v-else class="div-inBlock">
      <label style="cursor:pointer">{{ condition.title }}</label>
    </p>
    <!-- 是否過濾 -->
    <p v-if="condition.filterAbled" class="div-inBlock">
      <el-popover
        :ref="'filterPanel'+column.id"
        :value="condition.filterPanelVisible"
        placement="bottom"
        width="230"
        trigger="click"
        :visible-arrow="false"
        @show="showPanel(column,true)"
        @hide="showPanel(column,false)"
      >
        <el-input
          v-if="condition.mode==='input'"
          v-model="value"
          size="small"
          :placeholder="condition.title"
          clearable
          class="input-with-select"
          @keyup.enter.native="onFilter('filterPanel'+column.id,column)"
        >
          <el-button slot="append" icon="el-icon-search" @click.stop="onFilter('filterPanel'+column.id,column)"/>
        </el-input>
        <div v-if="condition.multiple">
          <el-select
            v-if="condition.mode==='select'"
            v-model="valueList"
            :placeholder="'請選擇'+condition.title"
            clearable
            :multiple="condition.multiple"
            @change="onFilter('filterPanel'+column.id,column)">
            <el-option
              v-for="item in condition.filters"
              :key="item.value"
              :label="item.text"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div v-if="!condition.multiple">
          <el-select
            v-if="condition.mode==='select'"
            v-model="value"
            :placeholder="'請選擇'+condition.title"
            clearable
            @change="onFilter('filterPanel'+column.id,column)">
            <el-option
              v-for="item in condition.filters"
              :key="item.value"
              :label="item.text"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <el-button
          slot="reference"
          type="text"
          :class="filterIcon"
        />
      </el-popover>
    </p>
  </div>
</template>

2.JS代碼 組件

<script>
export default {
  name: 'headerInput',
  props: ['condition', 'column', 'index'],
  data() {
    return {
      value: '',
      valueList: [],
      sortOrder: '',
      columns: {
        sortOrder: 'none'
      },
      filterIcon: 'el-icon-arrow-down',
      isIcon: false,
      indexs: '',
      isMultiple: true
    }
  },
  created() {},
  watch: {},
  methods: {
    changeOrder(condition, column) {
      let destOrder = ''
      switch (this.columns.sortOrder) {
        case 'none':
          destOrder = 'asc'
          break
        case 'asc':
          destOrder = 'desc'
          break
        case 'desc':
          destOrder = 'none'
          break
        default:
          destOrder = 'none'
          break
      }
      this.columns.sortOrder = destOrder
      this.sortOrder = destOrder
      this.$emit('sortChang', {
        prop: column.property,
        order: destOrder === 'asc' ? 'ascending' : destOrder === 'desc' ? 'descending' : null,
        type: true
      })
    },
    onFilter() {
      this.isIcon = true
      if (this.condition.mode === 'select') {
        this.filterIcon = this.isIcon && this.valueList.length > 0 ? 'el-icon-place' : 'el-icon-arrow-down'
      } else {
        this.filterIcon = this.isIcon && this.value ? 'el-icon-place' : 'el-icon-arrow-down'
      }
      this.$emit('inquireFilter', this.condition.multiple ? this.valueList : this.value)
    },
    clearSort(column) {
      this.columns.sortOrder = 'none'
      this.sortOrder = 'none'
    },
    showPanel() {}
  }
}
</script>

3.使用方法

1）Select 選擇方式

 <template slot="header" slot-scope="scope">
          <header-input
            :ref="'headerInput'+scope.$index"
            :condition="{title: scope.column.label,//單元格名稱
                         prop: scope.column.property, //綁定的字段
                         width: '',
                         required: false, //是否出現“*”
                         cellRender: 'text',
                         mode:'select',// select 為下拉方式 input為輸入方式
                         sortAbled: false, //能否排序
                         sortOrder: 'none', //按照哪種方式排序
                         filterAbled: true, //能否過濾
                         filterValue: '',
                         multiple:true, //是否多選 (mode必須是‘select’啟用)
                         filters:[{ text: '待審批', value: 1 }, { text: '已審待匯總', value: 2},{ text: '已匯總', value: 3 }], //type 為 select 時使用
                         filterPanelVisible: false}"
            :column="scope.column"
            @sortChang="e=>{sortChange(e,scope.$index)}"
            @inquireFilter="e=>{listQuery.Status=e,handleFilter()}"
          />
  </template>

2）input方式  於Select 選擇類似

<template slot="header" slot-scope="scope">
          <header-input
            :ref="'headerInput'+scope.$index"
            :condition="{title: scope.column.label,
                         prop: scope.column.property, //綁定的字段
                         width: '',
                         required: false, //是否出現“*”
                         cellRender: 'text',
                         mode:'input', //select為下拉方式 input為輸入方式
                         sortAbled: true, //能否排序
                         sortOrder: 'none', //按照哪種方式排序
                         filterAbled: true, //能否過濾
                         filterValue: '',
                         filterPanelVisible: false}"
            :column="scope.column"
            @sortChang="e=>{sortChange(e,scope.$index)}"
            @inquireFilter="e=>{listQuery.DeliveryCode=e,handleFilter()}"
          />
</template>

2）多選方式 （此方式只進行本地篩選，如想走遠程篩選可去看Elemnet官方文檔 ）

<el-table-column
   label="物流服務商"
   prop="CarrierCompany"
   sortable="custom"
   align="center"
   width="120"
   show-overflow-tooltip
   :filters="filtersList('CarrierCompany',list)"
   :filter-method="(value, row)=>{return row.CarrierCompany === value}"
>

filtersList() 為 計算屬性方法 過濾了表格中的數據並進行了去重

computed: {
  filtersList() {
    return function(key, list) {
      // key:字段名  list:數據源
      const data = list.map(item => {
        return {
          text: item[key],
          value: item[key]
        }
      })
      const res = new Map()
      return data.filter(arr => !res.has(arr.value) && res.set(arr.value, 1))
    }
  }
}

三、看不懂的可以看這里了

懶！不想寫，，，，看不懂說明你技術不行，去學習一下再來啊O(∩_∩)O哈哈~

實在不行聯系作者本人（也不一定回復）(*^▽^*)