表格组件关键字前台过滤

表格组件关键字前台过滤一般适用于页面加载全部业务数据的情况

• 增加一个计算属性，表格数据不为空时，对表格数据进行过滤
• 关键字不为空时，需要对表格数据进行过滤
• 把需要过滤的列字段解构出来，然后构建成一个新的字符串（用空格隔开），然后通过字符串includes方法判断是否包含关键字

代码示例：

<!-- 路由管理（用于管理系统非菜单一类的页面） -->
<template>
  <!-- 容器 -->
  <div class="bs-bg-color-white p16 mt5 bs-border-radius font-container">
    <!-- 搜索区域 -->
    <div class="fix">
      <div class="r">
        <el-input size="small" v-model.trim="keyword" placeholder="输⼊关键字过滤" clearable prefix-icon="el-icon-search" style="width: 230px;"></el-input>
        <el-divider direction="vertical"></el-divider>
        <el-button size="small" type="primary" @click="handleAdd">
          <v-svg type="bs-add" color="#fff"></v-svg> 新增
        </el-button>
      </div>
    </div>
    <!-- 表格区域 -->
    <el-table class="mt8" :data="tableDataFilter" size="small" border :height="tableHeight" :header-cell-style="TABLE_HEADER_CELL_STYLE" :cell-style="TABLE_CELL_STYLE" tooltip-effect="light">
      <el-table-column label="模块代码" prop="moduleCode" header-align="center" align="left" width="80"></el-table-column>
      <el-table-column label="路由代码" prop="routerCode" header-align="center" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column label="路由名称" prop="routerName" header-align="center" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column label="路由URL" prop="routerUrl" header-align="center" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column label="文件路径" prop="filePath" header-align="center" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column label="路由级次" prop="routerLevel" header-align="center" align="right" width="80"></el-table-column>
      <el-table-column label="操作" header-align="center" align="center" width="100">
        <template slot-scope="scope">
          <span class="bs-color-primary poi" @click="handleModify(scope.row)">修改</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑组件 -->
    <v-edit ref="edit" :get-page-info="getTableData" />
  </div>
</template>
<script>
import {
  innerHeight,
  TABLE_CELL_STYLE,
  TABLE_HEADER_CELL_STYLE,
} from '@/mixin/page';
import fetch from '@/config/fetch';
import util from '@/assets/js/util';
import vEdit from '@/modules/pa/pa-router/edit';

export default {
  name: 'PA_ROUTER',
  components: {
    vEdit,
  },
  mixins: [innerHeight],
  data() {
    return {
      keyword: '', //关键字
      tableData: [],  //表格数据
      TABLE_HEADER_CELL_STYLE,
      TABLE_CELL_STYLE,
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    /**
     * 获取表格数据
     */
    getTableData() {
      this.$loading();
      fetch
        .get('/pa/router/getPageData', {
          params: {
            pageIndex: 1,
            pageSize: 2000,
          },
        })
        .then(({ data }) => {
          this.$loadingClose();
          this.tableData = data;
        })
        .catch((err) => {
          console.error(err);
          this.$loadingClose();
          this.$message({
            type: 'error',
            message: err.msg,
          });
        });
    },
    /**
     * 处理新增
     */
    handleAdd() {
      this.$refs.edit.open();
    },
    /**
     * 处理修改
     */
    handleModify(data) {
      this.$refs.edit.open(data);
    },
  },
  computed: {
    /**
     * 表格数据过滤
     * TODO:增加一个计算属性，表格数据不为空时，对表格数据进行过滤
     */
    tableDataFilter() {
      // TODO:关键字不为空时，需要对表格数据进行过滤
      if (util.isNotEmpty(this.keyword)) {
        return this.tableData.filter((e) => {
          // TODO:把需要过滤的列字段解构出来，然后构建成一个新的字符串（用空格隔开），然后通过字符串includes方法判断是否包含关键字
          let {moduleCode, routerCode, routerName, routerUrl, filePath, routerLevel} = e;
          return `${moduleCode} ${routerCode} ${routerName} ${routerUrl} ${filePath} ${routerLevel}`.includes(this.keyword);
        });
      }
      return this.tableData;
    },
    /**
     * 表格高度
     */
    tableHeight() {
      return this.innerHeight - 145;
    },
  },
};
</script>