Element分析（组件篇）——FilterPanel

filter-panel是专门针对筛选器写的一个组件，最外面是一个el-zoom-in-top的transition，然后内部根据是否可以多选分为两个部分，多选部分用 checkbox 来实现，单选部分直接用 list 来实现。

<transition name="el-zoom-in-top">
  <div class="el-table-filter" v-if="multiple" v-show="showPopper">
    ...
  </div>
  
  <div class="el-table-filter" v-else v-show="showPopper">
    ...
  </div>
</transition>

其中 multiple 是根据列的 filterMultiple 来设置的。

因为要实现 popper 的效果，因此 mixin 中加入了 Popper 这一 mixin，其初始化在 mounted 这一生命周期中：

mounted() {
  // 自身挂载元素作为 popper
  this.popperElm = this.$el;
  // 对应的表头的单元格作为 reference
  this.referenceElm = this.cell;
  // 表主题滚动的时候，重新计算 popper
  this.table.bodyWrapper.addEventListener('scroll', () => {
    this.updatePopper();
  });

  // 处理 popper 的开关
  this.$watch('showPopper', (value) => {
    if (this.column) this.column.filterOpened = value;
    if (value) {
      Dropdown.open(this);
    } else {
      Dropdown.close(this);
    }
  });
}

其中 Dropdown 是抽象出来为了处理开关 popper 的。

import Vue from 'vue';
// 存储打开的 dropdown
var dropdowns = [];

/**
 * 处理点击事件，如果不是点击在 dropdown 就关闭
 * @param event 点击事件
 * @return
 */
!Vue.prototype.$isServer && document.addEventListener('click', function(event) {
  // 对每一个打开的 dropdown 进行判断
  dropdowns.forEach(function(dropdown) {
    // 触发事件的元素
    var target = event.target;
    // 如果不存在对应的 dropdown，或者没有挂载元素，直接返回
    if (!dropdown || !dropdown.$el) return;
    // 如果点击在 dropdown，或者它的内部也直接返回
    if (target === dropdown.$el || dropdown.$el.contains(target)) {
      return;
    }
    // 其他情况就调用相应的 handleOutsideClick 函数
    dropdown.handleOutsideClick && dropdown.handleOutsideClick(event);
  });
});

export default {
  // 打开，push 进数组
  open(instance) {
    if (instance) {
      dropdowns.push(instance);
    }
  },

  // 关闭，从数组中移出
  close(instance) {
    var index = dropdowns.indexOf(instance);
    if (index !== -1) {
      dropdowns.splice(instance, 1);
    }
  }
};

多选

多选部分的实现，就是一个 checkbox-group，实现较为简单，重点讲解一下，各种数据是如何获得的。

<div class="el-table-filter" v-if="multiple" v-show="showPopper">
  <!-- 多选部分 -->
  <div class="el-table-filter__content">
    <el-checkbox-group class="el-table-filter__checkbox-group" v-model="filteredValue">
      <el-checkbox
        v-for="filter in filters"
        :label="filter.value">{{ filter.text }}</el-checkbox>
    </el-checkbox-group>
  </div>
  <!-- 操作 -->
  <div class="el-table-filter__bottom">
    <button @click="handleConfirm"
      :class="{ 'is-disabled': filteredValue.length === 0 }"
      :disabled="filteredValue.length === 0">{{ t('el.table.confirmFilter') }}</button>
    <button @click="handleReset">{{ t('el.table.resetFilter') }}</button>
  </div>
</div>

筛选条件

首先是 filteredValue ，这是一个计算元素，用来表示筛选条件，包含 get和set，都是操纵的对应列的对应数据。

computed: {
  filteredValue: {
    get() {
      if (this.column) {
        return this.column.filteredValue || [];
      }
      return [];
    },
    set(value) {
      if (this.column) {
        this.column.filteredValue = value;
      }
    }
  },
}

而 filters 也是对应列上的一个属性，是对应的筛选器的相关信息。

computed: {
  filters() {
    return this.column && this.column.filters;
  },
}

操作按钮

操作的两个按钮的设置也很简单，内部数据用了 i18n 来实现多语言，首先分析一下确认按钮。

<button
  @click="handleConfirm"
  :class="{ 'is-disabled': filteredValue.length === 0 }"
  :disabled="filteredValue.length === 0">
  {{ t('el.table.confirmFilter') }}
</button>

首先是监听 click 事件，并绑定 handleConfirm 函数。

methods: {
  handleConfirm() {
    // 根据选择的筛选条件来筛选
    this.confirmFilter(this.filteredValue);
    // 隐藏
    this.handleOutsideClick();
  },
  
  // 直接改变 showPopper，然后 watch 会处理关闭这个 popper
  handleOutsideClick() {
    this.showPopper = false;
  },
  
  // 根据筛选条件来筛选
  confirmFilter(filteredValue) {
    this.table.store.commit('filterChange', {
      column: this.column,
      values: filteredValue
    });
  }
}

然后是重置按钮，只是简单的监听 click 事件，来触发 handleReset。

<button @click="handleReset">{{ t('el.table.resetFilter') }}</button>

methods: {
  handleReset() {
    // 清空筛选条件
    this.filteredValue = [];
    // 重新获取筛选数据
    this.confirmFilter(this.filteredValue);
    // 关闭
    this.handleOutsideClick();
  },
}

单选

单选是通过 li 来实现。

<div class="el-table-filter" v-else v-show="showPopper">
  <ul class="el-table-filter__list">
    <!-- 没有选择任何一个筛选条件 -->
    <li class="el-table-filter__list-item"
        :class="{ 'is-active': !filterValue }"
        @click="handleSelect(null)">{{ t('el.table.clearFilter') }}</li>
    
    <!-- 列表渲染每个筛选条件 -->
    <li class="el-table-filter__list-item"
        v-for="filter in filters"
        :label="filter.value"
        :class="{ 'is-active': isActive(filter) }"
        @click="handleSelect(filter.value)" >{{ filter.text }}</li>
  </ul>
</div>

其中 handleSelect 是用来处理选择了哪个筛选条件的，它复用了多选的相关操作，通过 filterValue 这一计算属性来影响 filterdValue。

computed: {
  filterValue: {
    // 筛选条件的第一个
    get() {
      return (this.column.filteredValue || [])[0];
    },
    
    // 设置筛选条件
    set(value) {
      if (this.filteredValue) {
        if ((typeof value !== 'undefined') && (value !== null)) {
          this.filteredValue.splice(0, 1, value);
        } else {
          this.filteredValue.splice(0, 1);
        }
      }
    }
  },
},

methods: {
  // 参数是筛选条件
  handleSelect(filterValue) {
    this.filterValue = filterValue;

    if ((typeof filterValue !== 'undefined') && (filterValue !== null)) {
      this.confirmFilter(this.filteredValue);
    } else {
      this.confirmFilter([]);
    }

    this.handleOutsideClick();
  },
  
  // 判断是否是所选的筛选条件
  isActive(filter) {
    return filter.value === this.filterValue;
  },
}