element ui中表格过滤filters请求后台接口

element ui中表格过滤filters请求后台接口

场景：点击过滤条件，根据过滤条件请求接口，刷新列表。

使用@filter-change方法

html（部分主要代码）

<el-table
  :data="systemTagList"
  border
  style="width: 100%"
  @selection-change="handleSelectionChange"   //多选
  @filter-change="change"     //过滤
  :default-sort="{ prop: 'count', order: 'descending' }"   //排序
>
  <el-table-column
    prop="from"
    label="系统创建属性"
    :filters="[
      { text: '全部', value: '全部' },
      { text: '系统创建', value: '系统创建' },
      { text: '用户创建', value: '用户创建' },
    ]"
    filter-placement="bottom-end" //选框位置
    :filter-multiple="false"   //是否多选
    :column-key="one"         //特殊标识
  ></el-table-column>
    <el-table-column
    prop="isFilter"
    label="筛选维度"
    :filters="[
      { text: '全部', value: '全部' },
      { text: '是', value: '是' },
      { text: '否', value: '否' },
    ]"
    filter-placement="bottom-end"  
    :filter-multiple="false"
    :column-key="two"       //特殊标识
  ></el-table-column>
  

js(变量)

data() {
  return {
    one: 'one',
    two: 'two',
    value: 0,
    isFilter: 2,
  };
},
  

js（过滤函数）

  change(value) {
    if (value.one) {
      if (value.one[0] === '系统创建') {
        this.value = 1;
      } else if (value.one[0] === '用户创建') {
        this.value = 2;
      } else {
        this.value = 0;
      }
    } else {
      if (value.two[0] === '是') {
        this.isFilter = 1;
      } else if (value.two[0] === '否') {
        this.isFilter = 0;
      } else {
        this.isFilter = 2;
      }
    }
  },
  

js（监听值的变化）

 watch: {
  value: {
    handler(newValue, oldValue) {
      if (newValue != oldValue) {
        this.refreshSystemAttribute();
      }
    },
    deep: true,
  },
  isFilter: {
    handler(newValue, oldValue) {
      if (newValue != oldValue) {
        this.refreshSystemAttribute();
      }
    },
    deep: true,
  },
},

js（请求接口主要函数）

async getSystemAttributeList(page=1, page_size=20,search='') {
    let res = await this.$api.Metadata.getSystemAttributeList({
      page,
      limit: page_size,
      search
      from: this.value,
      isFilter: this.isFilter,
    });