循环实现表头搜索

vue循环实现表头搜索

element-ui里已经提供了表头搜索功能，如果你的表只需要一两个属性搜索，用element-ui自带的是没有问题的，但是如果表大多数属性需要搜索功能这显然是不合适的，开发效率低也不易维护。下面这篇文章就是为了解决这个问题。一劳永逸，希望能帮到大家

思路：为了让该功能重复利用，把功能封装在组件里，组件里实现各类搜索功能（input，select ，datapicker…）,父组件在header插槽里引用，并向子组件传递带有表头名，搜索类型等字段的对象（根据需求添加其他字段），子组件向父组件传递子组件里处理好的数据， 父组件再用传过来的数据拼接到搜索条件里进行搜索， 总体就是子组件里获取界面输入的的数据并处理成所需要的格式传递给父组件，父组件再利用数据进行筛选。下面来看具体的代码实现：

子组件 TableHeaderSearch.vue

<template>
  <div class="customHeader" style="display: inline-block">
    <el-popover placement="bottom" trigger="click">
      <!-- table表头文字显示-->
      <span slot="reference" class="name">
        {{ column.name }} &nbsp;
        <i class="el-icon-arrow-down"></i>
      </span>
      <!-- text 文本 -->
      <div v-if="column.type === 'input'">
        <el-input
          v-model.trim="filterForm.value"
          clearable
          placeholder="请输入查询内容"
          @keyup.native.enter="confirm()"
        />
      </div>
      <!-- date 日期-->
      <div v-else-if="column.type === 'date'">
        <el-date-picker
          v-model="filterForm.value"
          type="date"
          clearable
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        />
      </div>
      <!-- select 下拉选择-->
      <div v-else-if="column.type === 'select'">
        <el-select
          v-model="filterForm.value"
          placeholder="请选择"
          style="width: 100%"
          filterable
          clearable
        >
          <el-option
            v-for="(item, index) in filterOptions"
            :key="index"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </div>
      <!-- 还有挺多不多赘述，可以自己根据条件添加 -->
      <div style="text-align: left">
        <el-button type="text" size="mini" @click="confirm()">筛选</el-button>
        <el-button type="text" size="mini" @click="reset('one')">重置</el-button>
        <el-button type="text" size="mini" @click="reset('all')">全部重置</el-button>
      </div>
    </el-popover>
  </div>
</template>
<script>
export default {
  name: "TableHeaderSearch",
  props: {
    column: {
      type: Object,
      default: () => {}
    },
    filterOptions: {
      type: Array,
      default: () => []
      // selset的数据也可以为riado，多选等
    }
  },
  data() {
    return {
      filterForm: {
        value: ""
      }
    };
  },
  created() {},
  methods: {
    confirm() {
      if (this.filterForm.value === "") {
        return this.$message.warning("请输入或选择筛选条件"); // 当value为空时
      } else if (this.column.porp.indexOf(".") !== -1) {
      // 解决porp是多层问题 类似与 animal.pig
        this.filterForm.porp = this.column.porp.match(/\.(.*)/)[1];
      } else {
        this.filterForm.porp = this.column.porp;
      }
      this.$emit("tableUpdate", this.filterForm); // 传递的是对象
    },
    reset(e) {
      if (e === "one") {
        this.filterForm.value = "";
        this.$emit("tableUpdate", { ...this.filterForm, type: "reset" }); // 传递的是对象
      } else if (e === "all") {
        this.$emit("tableUpdate", { ...this.filterForm, type: "wholeReset" }); // 传递的是对象
      }
    }
  }
};
</script>

父组件 template部分

<template>
  <div>
    <el-table
      ref="tableData"
      v-loading="loading"
      highlight-current-row
      :data="tableData"
      :stripe="true"
      border
      height="88%"
    >
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column
        v-for="item, index in formDatalists"
        :key="index"
        :prop="`${item.porp}`"
        :label="item.name"
        min-width="'130'"
      >
        <template #header>
          <TableHeaderSearch
            :column="item"
            :filter-options="item.typeObj.list"
            :table-up-stauts="tableUpStauts"
            @tableUpdate="tableUpdate($event, item.name)"
          />
        </template>
        <template v-if="scope.row[`dataNo`] !== undefined" slot-scope="scope">
          <span>{{ scope.row[`${item.porp}`] || '——' }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

script部分

<script>
import sheepCountApi from "@/api/livestock-manage/sheep-management/sheep-count";
import { mymixin } from "@/utils/mixins";
import TableHeaderSearch from "@/components/TableHeaderSearch.vue";
export default {
  name: "SheepInformation",
  components: { TableHeaderSearch },
  mixins: [mymixin],
  data() {
    return {
      searchObj: {},
      // table渲染
      formDatalists: [
        {
          type: "TimePicker", // input Select Checkbox TimePicker
          porp: "startDate",
          typeObj: {},
          name: "清点开始时间",
          required: true
        },
        {
          type: "TimePicker", // input Select Checkbox TimePicker
          porp: "endDate",
          typeObj: {},
          name: "清点结束时间",
          required: true
        },
        {
          type: "input", // input Select Checkbox TimePicker
          porp: "theoryTotal",
          typeObj: {},
          name: "理论数量",
          required: true
        },
        {
          type: "input", // input Select Checkbox TimePicker
          porp: "countResults",
          typeObj: {},
          name: "实际清点数量",
          required: true
        }
      ],
      rules: {}
    };
  },
  mounted() {
    this.getTableDataList();
  },
  methods: {
    // 表头筛选
    tableUpdate(data, name) {
      // 重置
      if (data.type === "reset") {
        for (let key in this.searchObj) {
          if (key === data.porp) {
            this.$set(this.searchObj, key, undefined);
          }
        }
      } else if (
        data.value !== "" &&
        data.type !== "reset" &&
        data.type !== "wholeReset"
      ) {
        // 筛选条件
        this.searchObj[data.porp] = data.value;
      } else if (data.type === "wholeReset") {
        // 全部重置
        for (let key in this.searchObj) {
          this.$set(this.searchObj, key, undefined);
        }
      }
    },
    // 获取table数据
    getTableDataList() {
      this.loading = true;
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: this.searchObj
      };
      sheepCountApi.pageQuery(params).then(res => {
        this.loading = false;
        let data = res.data;
        if (data) {
          this.totalSize = data.totalElements;
          this.tableData = data.content;
          this.addblankmet();
          this.resetActionBar();
        }
      });
    }
</script>