column-filter（列筛选）

基础用法

示例：

代码示例：

<!-- 数据检查 -->
<template>
  <!-- 容器 -->
  <div class="bs-bg-color-white bs-border-radius p16 mt5 font-container">
    <!-- 列表区域 -->
    <vxe-table class="mt8" ref="table" :data="dataFilter" border size="small" round resizable :height="tableHeight" :header-cell-style="TABLE_HEADER_CELL_STYLE" :cell-style="TABLE_CELL_STYLE" :scroll-y="{enabled: true}" auto-resize>
      <vxe-table-column field="lastCheckTime" title="最后检查时间" header-align="center" align="left" width="180"></vxe-table-column>
      <vxe-table-column field="checkResult" title="最后检查状态" header-align="center" align="center" width="140">
        <template v-slot:header="scope">
          <div class="flex-center">
            <span>{{scope.column.title}}</span>
            <!-- 列过滤组件 -->
            <v-column-filter :is-active="hasColumnFilter('checkResult')" :getData="() => getColumnData('checkResult')" :getChecked="() => getColumnFilter('checkResult')" :column-display="checkResultDisplay" @change="onColumnFilterChange('checkResult', $event)">
              <template v-slot="{value}">
                {{checkResultDisplay(value)}}
              </template>
            </v-column-filter>
          </div>
        </template>
        <template slot-scope="scope">
          <v-status :text="checkResultDisplay(scope.row.checkResult)" :color="checkResultDisplayColor(scope.row.checkResult)" />
        </template>
      </vxe-table-column>
    </vxe-table>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import {
  GET_LOGIN_INFO,
  GET_CONTEXT_AGY_ACB,
  IS_FONT_BIG,
} from '@/store/login';
import fetch from '@/config/fetch';
// TODO:从mixin/page.js中引入相关公共方法（getColumnData、resetColumnFilter、getColumnFilter、tableDataColumnFilter、onColumnFilterChange、hasColumnFilter），涉及到标准产品月度版本发版的的模块需要从模块内部引入相关公共方法
import {
  innerHeight,
  TABLE_HEADER_CELL_STYLE,
  TABLE_CELL_STYLE,
  pagination,
  getColumnData,
  resetColumnFilter,
  getColumnFilter,
  tableDataColumnFilter,
  onColumnFilterChange,
  hasColumnFilter,
} from '@/mixin/page';
import { CHECK_RESULT } from '@/modules/pa/pa-data-check/constant';

export default {
  name: 'PA_DATA_CHECK',
  mixins: [innerHeight, pagination],
  data() {
    return {
      columnFilter: {
        checkResult: [], //最后检查状态
      }, //TODO：列过滤相关的过滤值
      TABLE_HEADER_CELL_STYLE,
      TABLE_CELL_STYLE,
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    /**
     * 获取页面数据
     * 1、设置页码为第一页
     * 2、清空列表数据
     * 3、取消选择全部行数据
     * 4、获取列表数据
     */
    getPageInfo() {
      this.page.currentPage = 1;
      this.pageData = [];
      resetColumnFilter(this.$data);
      this.$nextTick(() => {
        this.getTableData();
      });
    },
    /**
     * 请求表格数据
     */
    fetchTableData() {
      return fetch
        .post('/carry/check/getList', {
          isEnabled: this.isEnabled,
          checkModels: this.checkModels,
          keywords: this.keywords,
          pageIndex: this.page.currentPage,
          pageSize: this.page.pageSize,
        })
        .then(({ data }) => data || {});
    },
    /**
     * 获取页面数据
     */
    async getTableData() {
      try {
        this.$loading();
        let data = await this.fetchTableData();
        this.pageData = data.result;
        this.page.total = data.total;
      } catch (err) {
        console.error(err);
        this.$message.error(err.msg);
        return Promise.reject(err);
      } finally {
        this.$loadingClose();
      }
    },
    /**
     * 获取当前列过滤选项数据
     */
    getColumnData(field) {
      return getColumnData(this.pageData, this.columnFilter, field);
    },
    /**
     * 获取列过滤相关的字段过滤值
     */
    getColumnFilter(field) {
      return getColumnFilter(this.columnFilter, field);
    },
    /**
     * 设置列过滤相关的过滤值
     */
    onColumnFilterChange(field, value) {
      onColumnFilterChange(this.columnFilter, field, value);
    },
    /**
     * 检查结果显示
     */
    checkResultDisplay(checkResult) {
      switch (checkResult) {
        case CHECK_RESULT.UN_START:
          return '未开始';
        case CHECK_RESULT.SUCCESS:
          return '通过';
        case CHECK_RESULT.FAIL:
          return '不通过';
        case CHECK_RESULT.CHECKING:
          return '检查中';
        default:
          return '';
      }
    },
    /**
     * 检查结果颜色
     */
    checkResultDisplayColor(checkResult) {
      switch (checkResult) {
        case CHECK_RESULT.UN_START:
          return '#c0c4cc';
        case CHECK_RESULT.SUCCESS:
          return '#52c41a';
        case CHECK_RESULT.FAIL:
          return '#ff4d4f';
        case CHECK_RESULT.CHECKING:
          return '#1890ff';
        default:
          return '';
      }
    },
    /**
     * 列过滤状态
     */
    hasColumnFilter(field) {
      return hasColumnFilter(this.columnFilter, field);
    },
  },
  computed: {
    ...mapGetters([GET_LOGIN_INFO, GET_CONTEXT_AGY_ACB, IS_FONT_BIG]),
    /**
     * 表格数据过滤
     */
    dataFilter() {
      return tableDataColumnFilter(this.pageData, this.columnFilter);
    },
    /**
     * 表格高
     */
    tableHeight() {
      return this.IS_FONT_BIG ? this.innerHeight - 210 : this.innerHeight - 203;
    },
  },
};
</script>

属性：

参数	说明	类型	可选值	默认值
isActive	当前是否处于过滤状态	Boolean	-	false
placement	popover显示位置	String	-	'bottom-start'
getData	获取选项数据的方法	Function	-	-
getChecked	获取当前选中的数据的方法	Function	-	-
columnDisplay	列显示的方法，如果使用插槽显示选项数据，则需要传此函数	Function	-	-

事件：

事件名	说明	参数	参数说明
change	改变事件	checkedValue

插槽：

插槽名称	说明	参数
default	内容项区域	value