elment-ui table組件 -- 遠程篩選排序

基於 elment-ui table組件 開發，主要請求後臺實現篩選 排序的功能。

需求

• 排序 篩選 是對後臺整個數據進行操作，而不是對當前頁面的數據進行操作
• 若是其關聯的下一級頁面，（eg：點擊查看編輯時，再返回當前頁面時，保留之前篩選，或排序條件），否則清空

先上一份源碼, 直接使用官網的（修改了一小部分參數，可以忽略）

<el-table
  :data="tableData"
  style="width: 100%"
>
  <el-table-column
    prop="date"
    label="日期"
    sortable="custom"
    min-width="180"
    :filters="dateList"
  >
  </el-table-column>
  <el-table-column
    sortable="custom"
    prop="name"
    label="姓名"
    min-width="180"
  >
  </el-table-column>
  <el-table-column
    prop="address"
    label="地址"
    min-width="200"
  >
  </el-table-column>
  <el-table-column
    prop="tag"
    label="標簽"
    min-width="100"
    :filters="flagList"
  >
    <template slot-scope="scope">
      <el-tag
        :type="scope.row.tag === ‘家‘ ? ‘primary‘ : ‘success‘"
        disable-transitions
      >{{scope.row.tag}}</el-tag>
    </template>
  </el-table-column>
</el-table>
 

知識點

• 篩選
  • 表頭 （el-table）
    • filter-change

    <el-table
      :data="tableData"
      style="width: 100%"
      @filter-change="handleFilter"
    >

  • 表格（el-table-column）

    • 針對需要排序的列添加 :filters="Array[Object]" ,此處註意 Object 的格式必須為 {text: **, value: **} 鍵必須如此，暫時沒有找到可以修改的api

      <el-table-column
        prop="date"
        label="日期"
        sortable="custom"
        min-width="180"
        :filters="dateList"
      >
      </el-table-column>
       
      

  • 設置默認值
    • filtered-value （作用在 el-table-column）

    <el-table-column
      prop="tag"
      label="標簽"
      min-width="100"
      :filters="flagList"
      :filtered-value="[‘公司‘]"
    >

    顯示效果如下

• 排序
  • 表頭 (el-table)
    • sort-change

    <el-table
      :data="tableData"
      style="width: 100%"
      @filter-change="handleFilter"
      @sort-change="handleSort"
    >
     
    

• tbody (el-table-column)
  • sortable 設置為 :sortable="‘custom‘"

  <el-table-column
    prop="date"
    label="日期"
    :sortable="‘custom‘"
    min-width="180"
    :filters="dateList"
  >

• 設置默認值
  • default-sort 參數 { order: **, prop: **}， `prop指那一列，order 指升序還是倒序

顯示效果如下

至此，初步需求完成，現在就是具體細化了

細化

• 將未知的值都存入 vuex 中，便於全局控制
  • default-sort, filtered-value, filters

  註 default-sort, filtered-value 不能寫死，因為是動態的請求參數，因而得註意了

  // component
  computed: mapState(‘elTable‘, [
    ‘flagList‘,
    ‘dateList‘,
    ‘filters‘,
    ‘sort‘
  ])
  // vuex
  filters: [],
  sort: {
    order: ‘‘,
    prop: ‘‘
  }

• 方法，進行調用修改
  • 篩選過程中，無法很好定位到具體哪一列， 給當前列添加 column-key

  // vuex
  filtersDate: [],
  filtersTag: [],
  sort: {
    order: ‘‘,
    prop: ‘‘
  }
  },
  mutations: {
    setFilters_date (state, data = []) {
      state.filtersDate = data
    },
    setFilters_tag (state, data = []) {
      state.filtersTag = data
    },
    setSort (state, data = {}) {
      state.sort = data
    }
  }
  // component
  methods: {
    ...mapMutations(‘elTable‘, [
      ‘setFilters_date‘,
      ‘setSort‘,
      ‘setFilters_tag‘
    ]),
  
     handleFilter (filter) {
       // 拿到 key
       /**
        * 命名技巧罷了，只是關聯
        */
      const key = Object.keys(filter)[0]
      this[‘setFilters_‘ + key](filter[key])
     },
     handleSort (column, prop, order) {
       console.log(column, prop, order)
     }
  },
  computed: mapState(‘elTable‘, [
    ‘flagList‘,
    ‘dateList‘,
    ‘filtersDate‘,
    ‘filtersFlag‘,
    ‘sort‘
  ])

  上面主要是如何將幾者之間進行關聯罷了

清除

即要清除當前頁面的數據，同時還要清除 vuex 裏存的數據

• clearFilter, clearSort

// vuex
clear (state) {
  state.filtersDate = []
  state.filtersTag = []
  state.sort = {
    order: ‘‘,
    prop: ‘‘
  }
}
// component
clearAll () {
 this.$refs.tb.clearFilter()
 this.$refs.tb.clearSort()
 this.clear()
}

• 是否是關聯的頁面
  created () { // 此處做判斷，是否是其關聯的頁面，不是清除，是就不清除 if (!isPage) return this.clearAll() }

總結

• 可能還有些不完善，但是已經可以實現上述需求了
• 有個問題， 篩選時，不點擊篩選或重置，是無法在vuex中緩存，其實也很合理，vuex裏存請求的數據，沒點擊也就沒必要存儲了

elment-ui table組件 -- 遠程篩選排序