VUE element-ui之table表格前端自动过滤（筛选），不调用数据接口筛选表格，方法

步骤：

模板中定义：

<el-table
  :data="showDetailrowtableDatas"
   border
   height="300px"
   :show-summary="true"
   :summary-method="getSummaries"
 >
 <el-table-column
    v-for="(list, listindex) in detailrowtabledataslist"
    :key="listindex"
    :prop="list.prop"
    :label="list.label"
    :type="list.type"
    :sortable="list.sortable"
    :width="list.width"
    :formatter="list.formatter"
  >
<el-table/>

定义data数据：

data() {
    return {
         detailrowtabledataslist: [
            {
              prop: 'orderNumber',
              label: '订单编号',
              sortable: true,
              width: '120px',
              keynum: 1,
              search: ''
            },
            {
              prop: 'selfNo',
              label: '自编号',
              width: '120px',
              keynum: 1,
              search: ''
            },
            {
              prop: 'projectName',
              label: '项目名称',
              keynum: 1,
              search: '',
              width: '120px'
            }
    ]    
    }
}

计算属性中对data进行过滤：

computed: {
    showDetailrowtableDatas() { //重点！！！
      const detailSearchParams = this.detailSearchParams
      console.log(detailSearchParams)
      let arr = JSON.parse(JSON.stringify(this.detailrowtableDatas))
      Object.keys(detailSearchParams || {}).forEach(key => {
        arr = arr.filter(el => (el[key] + '').includes(detailSearchParams[key]))
      })
      console.log(arr)
      return arr
    },
    detailSearchParams: {
      get() {
        return {
          orderNumber: this.getSearchSelectValue('orderNumber'),
          selfNo: this.getSearchSelectValue('selfNo'),
          projectName: this.getSearchSelectValue('projectName'),
          productName: this.getSearchSelectValue('productName'),
          width: this.getSearchSelectValue('width'),
          height: this.getSearchSelectValue('height'),
          floorNumber: this.getSearchSelectValue('floorNumber')
        }
      },
      set(newValue) {
        this.tabledataslist = this.detailrowtabledataslist.map(el => {
          const propsKey = el.prop
          return {
            ...el,
            search: newValue[propsKey] || ''
          }
        })
      }
    }
  }

获取参数json用于和表格prop进行比对：

methods: {
    getSearchSelectValue(key) {
      const item = this.detailrowtabledataslist.find(el => el.prop === key)
      console.log(item)
      return item.search
    }
}

看效果：

此方法不仅筛选速度快，而且不调用接口减小服务器压力（注意：双表头前面的博文有详细介绍）