vue elementUi table 表格联动筛选以及远程调用

在使用Vue elementUi table组件时，通过表格头部筛选项，筛选是否追踪时，需要自动选择是否整改项的是。除了联动筛选，还需要远程调用后端分页接口，实时拉取数据，而不是前端筛选。

代码：

<el-table
  ref="qualityCheckTable"
  v-loading="listLoading"
  :data="list"
  border
  style="width: 100%;"
  element-loading-text="加载中"
  fit
  highlight-current-row
  :class="{'.tableHieght':list.length === 0}"
  @filter-change="fnFilterChangeInit"
>
  <div slot="empty">
    <img src="@/assets/img/noDate.png" class="nodate">
    <p>还没有数据哦！</p>
  </div>
  <el-table-column prop="typeName" label="质控类型名称" align="center" />
  <el-table-column label="是否整改" column-key="measureFlag" align="center" prop="measureFlag" :filter-multiple="false" :filters="[{text: '是', value: 1}, {text: '否', value: 2}]" :filter-method="filterHandler" sortable>
    <template slot-scope="scope">
      <span>{{ applyTypeeCheck(scope.row.measureFlag) }}</span>
    </template>
  </el-table-column>
  <el-table-column label="整改条件" align="center">
    <template slot-scope="scope">
      <div v-show="scope.row.measureParamLevelName && scope.row.measureFlag === 1">
        <span :style="{color:scope.row.measureParamLevelColor}">{{ scope.row.measureParamLevelName }}</span> 级别以上
      </div>
    </template>
  </el-table-column>
  <el-table-column label="是否追踪" column-key="feedbackFlag" align="center" prop="feedbackFlag" :filter-multiple="false" :filters="[{text: '是', value: 1}, {text: '否', value: 2}]" :filter-method="filterHandler" sortable>
    <template slot-scope="scope">
      <div v-show="scope.row.measureFlag === 1">
        <span>{{ applyTypeeCheck(scope.row.feedbackFlag) }}</span>
      </div>
    </template>
  </el-table-column>
  <el-table-column label="pdca循环" column-key="pdcaFlag" align="center" prop="pdcaFlag" :filter-multiple="false" :filters="[{text: '是', value: 1}, {text: '否', value: 2}]" :filter-method="filterHandler" sortable>
    <template slot-scope="scope">
      <span>{{ applyTypeeCheck(scope.row.pdcaFlag) }}</span>
    </template>
  </el-table-column>
  <el-table-column label="PDCA循环条件" align="center" min-width="100px">
    <template slot-scope="scope">
      <div v-show="scope.row.pdcaMeasureParamLevelName && scope.row.pdcaFlag === 1">
        <span :style="{color:scope.row.pdcaMeasureParamLevelColor}">{{ scope.row.pdcaMeasureParamLevelName }}</span> 级别以上 <span v-show="scope.row.pdcaFeedbackParamFeedbackName" class="feedbackSpan">{{ scope.row.pdcaFeedbackParamFeedbackName }}</span>
      </div>
    </template>
  </el-table-column>
  <el-table-column label="操作" align="center">
    <template slot-scope="scope">
      <el-link class="font font2 show" :underline="false" type="primary" @click="typeClick(scope.row,'edit')">编辑</el-link>
      <el-link class="font font1" :underline="false" type="danger" @click="typeClick(scope.row,'delete')">删除</el-link>
    </template>
  </el-table-column>
</el-table>

methods: {
    filterHandler(value, row, column) {
      return true
    },
    fnFilterChangeInit(filter) {
      // 自定义筛选方法
      // console.log(filter)
      const filterMeasureFlag = filter['measureFlag']// 是否整改
      const filterFeedbackFlag = filter['feedbackFlag']// 是否追踪
      const filterPdcaFlag = filter['pdcaFlag']// pdca循环
      // 进行是否整改项筛选 是否整改项筛选仅根据本项内容筛选即可
      if (filterMeasureFlag) {
        // 查询全部
        if (filterMeasureFlag.length === 0) {
          this.query.measureFlag = 0
          // 获取选择的值，设置到查询参数中
        } else if (filterMeasureFlag.length === 1) {
          this.query.measureFlag = filterMeasureFlag[0]
        }
        // 如果当前筛选 是不需要整改，则同时判断 是否追踪项目 有没有设置筛选项 如果追踪项目设置了筛选，则强制清空掉筛选（由于追踪项目是强制需要整改的）
        if (this.query.measureFlag === 2 && this.$refs.qualityCheckTable.columns[3].filteredValue.length > 0) {
          this.$refs.qualityCheckTable.columns[3].filteredValue = []
        }
        // 同时调用是否追踪的筛选
        this.$refs.qualityCheckTable.columns[3].filterMethod()
      }
      // 进行是否追踪项筛选 是否追踪项筛选需要根据是否整改项进行控制
      if (filterFeedbackFlag) {
        if (filterFeedbackFlag.length === 0) {
          this.query.feedbackFlag = 0
          // 获取选择的值，设置到查询参数中 并且强制将是否整改项设置为是(包括查询参数以及筛选项的值)
        } else if (filterFeedbackFlag.length === 1) {
          this.query.measureFlag = 1
          this.query.feedbackFlag = filterFeedbackFlag[0]
          this.$refs.qualityCheckTable.columns[1].filteredValue = [1]
        }
        // 调用是否整改的筛选
        this.$refs.qualityCheckTable.columns[1].filterMethod()
      }
    
      // 进行pdca循环判断
      if (filterPdcaFlag) {
        if (filterPdcaFlag.length === 0) {
          this.query.pdcaFlag = 0
        } else if (filterPdcaFlag.length === 1) {
          this.query.pdcaFlag = filterPdcaFlag[0]
        }
      }
      this.initTableData()
    }
}

方法：

1、在el-table标签中增加 @filter-change="fnFilterChangeInit"

2、在el-table-column标签中增加筛选项内容 :filters="[{text: '是', value: 1}, {text: '否', value: 2}]"

3、在el-table-column标签中增加默认筛选处理方法 :filter-method="filterHandler"

4、在el-table-column标签中增加 cloum-key 值后续filter方法中需要用到

5、在methods中实现filterHandler方法，默认返回true

6、在methods中实现fnFilterChangeInit方法参数为filter

7、在fnFilterChangeInit方法中，可以通过filter['cloum-key']获取过滤项值

联动调用时，调用其他项的筛选项

this.$refs.qualityCheckTable.columns[3].filteredValue = [1]

其中qualityCheckTable为el-table中的ref值

columns[3]中的数字是筛选项的下标值，[1]表示设置对应项的值