elementUI中表格之filters及filter-method用法

filters：过滤条件
filter-method：过滤方法

1.filters数据类型：[{ text: xxx, value: xxx }, { text: xxx, value: xxx }]

2.过滤方法：filter-method

3.filter-method方法会遍历每一行数据，方法里面的操作有多少条数据就会执行多少次，在遍历的时候筛选出对应的数据。多个筛选条件之间会相互影响，即 取交集！

具体实现：

<template>
  <!-- 组件 -->
  <div class="record-container">
    <el-table
      :data="dataList"
      stripe
      max-height="500px"
      style="width: 100%;"
    >
      <el-table-column
        prop="operationUser"
        label="操作人"
        width="200"
        :filters="operationUserList"
        :filter-method="handleOperationUserCommand"
        align="center"
      />
      <el-table-column
        prop="operationTime"
        label="操作时间"
        width="200"
        align="center"
      />
      <el-table-column
        prop="operationDesc"
        label="操作内容"
        :filters="operationDescList"
        :filter-method="handleOperationDescListCommand"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="operationTypeDesc"
        label="操作类型"
        :filters="operationTypeDescList"
        :filter-method="handleOperationTypeDescListCommand"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="operationResult"
        label="操作结果"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="reMark"
        label="操作备注"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            v-if="diffVisible(scope.row)"
            type="text"
            @click="compare(scope.row)"
          >
            对比
          </el-button>
          <el-tooltip
            v-else
            class="item"
            effect="dark"
          >
            <!-- 下面不能使用格式化换行！否则会有页面内容换行问题 -->
            <div
              slot="content"
              style="max-width: 350px; white-space: pre-wrap;"
            >
              {{ scope.row.reMark || '---' }}
            </div>
            <span style="overflow: hidden; text-overflow: ellipsis; white-space: pre-wrap;">
              {{ scope.row.reMark || '---' }}
            </span>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 对比控件 -->
    <CodeCompare
      ref="codeCompareRef"
      :original-code="originalCode"
      :modified-code="modifiedCode"
    />
  </div>
</template>
<script lang="ts">
import {
  defineComponent, ref, watch, onMounted, toRefs, nextTick,
} from '@vue/composition-api';
// import ...

export default defineComponent({
  name: 'Operationrecord',
  components: { CodeCompare },
  props: {
    experimentGuid: {
      type: String,
      default: null,
    },
    expUpdate: {
      type: Number,
      default: null,
    },
  },
  setup(props) {
    const { experimentGuid, expUpdate } = toRefs(props);

    // 数据声明
    const dataList = ref<dataListItem[]>([]);
    const originalCode = ref('');
    const modifiedCode = ref('');
    // 操作集合
    const operationUserList = ref<tableFilterItemType[]>([]);
    const operationDescList = ref<tableFilterItemType[]>([]);
    const operationTypeDescList = ref<tableFilterItemType[]>([]);

    // 操作集合
    const getLists = () => {
      const seenUsers = new Set(); // 操作人+内容 set集合
      const operationSet = new Set();// 操作类型 set集合

      dataList.value.forEach((item: dataListItem) => {
        // 操作人
        if (!seenUsers.has(item.operationUser)) {
          seenUsers.add(item.operationUser);
          operationUserList.value.push({ text: item.operationUser, value: item.operationUser });
        }
        // 操作内容
        if (!seenUsers.has(item.operationDesc)) {
          seenUsers.add(item.operationDesc);
          operationDescList.value.push({ text: item.operationDesc, value: item.operationDesc });
        }
        // 操作类型
        if (!operationSet.has(item.operationTypeDesc)) {
          operationSet.add(item.operationTypeDesc);
          operationTypeDescList.value.push(
            { text: item.operationTypeDesc, value: item.operationTypeDesc },
          );
        }
      });
    };

    // 查询操作日志
    const fetchData = async () => {
      const { data } = await queryExperimentOperationLog({ guid: experimentGuid.value });
      dataList.value = deepCopy(data.reverse());
      getLists();
    };

    // 监听 expUpdate 变化
    watch(expUpdate, (val) => {
      if (val) {
        fetchData();
      }
    });

    // 初始化数据
    onMounted(() => {
      fetchData();
    });

    // 比较和差异可见性判断
    const diffVisible = (opt: dataListItem) => ['实验阶段变更', '修改实验关联指标', '调整白名单', '随机种子切换'].includes(opt.operationDesc)
             && opt.oldRemark && opt.newRemark;

    const codeCompareRef = ref(null);
    const compare = (opt: dataListItem) => {
      originalCode.value = JSON.stringify(JSON.parse(opt.oldRemark), null, 2);
      modifiedCode.value = JSON.stringify(JSON.parse(opt.newRemark), null, 2);
      // 调用组件的 open 方法
      (codeCompareRef.value as any).open();
    };

    // 操作人
    const handleOperationUserCommand = (value: string, row: dataListItem) => row.operationUser === value;

    // 操作内容
    const handleOperationDescListCommand = (value: string, row: dataListItem) => row.operationDesc === value;

    // 操作类型
    const handleOperationTypeDescListCommand = (value: string, row: dataListItem) => row.operationTypeDesc === value;

    return {
      createUserFilter,
      dataList,
      originalCode,
      modifiedCode,
      diffVisible,
      compare,
      codeCompareRef,
      operationUserList,
      operationDescList,
      operationTypeDescList,
      getLists,
      handleOperationUserCommand,
      handleOperationDescListCommand,
      handleOperationTypeDescListCommand,
    };
  },
});
</script>

<style lang="less" scoped>
.record-container {
  padding: 20px;
}

.header-dropdown {
  color: #909399;
  font-size: 12px;
}

</style>