Vue Element table表格实现表头自定义多类型动态筛选 , 目前10种筛选类型，复制即用

置顶 已于 2024-06-13 17:40:56 修改
阅读量2w 收藏 148
点赞数 37
分类专栏： 前端踩坑合集 文章标签： elementui 前端 vue.js
于 2022-03-25 14:22:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45895806/article/details/123716840
版权

一、效果图

目前10种筛选类型
看看是否是你需要的，本文可能有点长 ，我尽可能的给讲清楚，包括源码附上

在这里插入图片描述

二、无聊发言

  1. 点击当前行跳转
  2. 部分数据后缀追加图标
  3. 某列数据根据状态增加颜色标识

在这里插入图片描述

三、前言

  1. 实现图中的表格，特定的两个要求，筛选条件的接口(返回多种类型及字段标识)，列表接口统一为一个，靠mark参数传输与后台商定好的标识，当然，如果你们的后端能够即能返回列表数据又能返回筛选条件的各种类型的标识也是极好的 。

  2. 表格中涉及到返回的数据是value（数字、id等类似select option里绑定的value）形式的，可能需要后端处理成label的形式返给前端，如同上图里的地区，下拉选择等列

  3. 表格中如有当前行的跳转、当前行的数据状态亦或者尾部的操作列存在时，需小心斟酌封装

  4. 目前筛选tag删除掉已选的条件没有支持到筛选popover里面清空数据，类似重置功能

  5. 表格上面的搜索组件，是个针对表格数据的全局搜索

  6. vuedraggable是拖拽插件，上图中字段管理里的拖拽效果 ，需要的话请自行npm install

  7. scss样式变量需自行更改，谢谢!!

  8. 后续发现的bug我会陆续修复并修改此文

四、组件层级

在这里插入图片描述

五、文件目录

在这里插入图片描述
在这里插入图片描述

六、index.vue(最父级，调用入口)

附：组件zn-开头命名是以公司缩写来命名的,目的也是为了区分全局组件 ，个人组件命名随意

<template>
  <div class="allCustomer-container">
    <zn-query-form>
      <zn-query-form-top-panel>  
        <!-- 字段管理 -->
        <field-management @setColumns="getColumns" />
        <!-- 搜索 -->
        <Search @up-Search="upSearch" />
        <!-- 筛选条件 -->
        <filter-tag :tagList="conditionList" @up-table="tableUpdate" />
      </zn-query-form-top-panel>
    </zn-query-form>

    <zn-filter-table
      ref="filterTable"
      :multiple="true"
      :tableData="tableList"
      :finallyColumns="finallyColumns"
      :deatilsPath="deatilsPath"
      @selectList="getSelect"
      @fetch-data="fetchData"
    />
    <zn-pagination
      v-show="total > 0"
      :page.sync="queryForm.page"
      :limit.sync="queryForm.listRows"
      @pagination="fetchData"
      :total="total"
      :algin="'right'"
    />
  </div>
</template>

<script>
import Search from '@/components/Search'
import FieldManagement from '@/components/ZnFilterTable/components/fieldManagement'
import FilterTag from '@/components/ZnFilterTable/components/filterTag'
import ZnFilterTable from '@/components/ZnFilterTable'
import { getAllList } from '@/api/customer'
export default {
  name: 'allCustomer',
  components: {
    Search,
    FieldManagement,
    FilterTag,
    ZnFilterTable,
  },
  provide() {
    return {
      mark: 'Member', //特定标识,根据业务模块不同,传输的标识也不同,标识由后端定义(或者字典维护)
    }
  },
  data() {
    return {
      total: 0,
      tableList: [],
      listLoading: false,
      queryForm: {
        page: 1,
        listRows: 10,
        keywords: '',
        _filter: {}, //头部筛选
      },
      deatilsPath: '/customer/deatils', //表格当前行跳转路径
      options: [],
      conditionList: [], //自定义筛选条件
      columns: [], //筛选条件中的数据
      checkList: [], //筛选条件中选中的数据
      multipleList: [], //表格复选多选中的数据
    }
  },
  computed: {
    finallyColumns() {
      return this.columns.filter((item) => this.checkList.includes(item.label))
    },
  },
  watch: {},
  created() {
    this.fetchData()
  },
  mounted() {},
  methods: {
    // 请求table数据
    async fetchData(arr) {
      this.listLoading = true
      //根据后端要求格式特殊处理
      if (Array.isArray(arr) && arr.length > 0) {
        this.conditionList = arr //筛选tag赋值
        this.queryForm._filter = {} //每次进来置空
        arr.forEach((item) => {
          this.queryForm._filter[item['fieldName']] = item['value']
        })
      }
      const {
        data: { data, total },
      } = await getAllList(this.queryForm)
      this.tableList = data
      this.total = total
      this.listLoading = false
    },
    // 更新搜索字段,更新table数据
    upSearch(val) {
      this.queryForm.keywords = val
      this.fetchData()
    },
    // 获取多选选中的table数据(需求未出,功能暂留)
    getSelect(list) {
      this.multipleList = list
      console.log('list', list)
    },
    // 子组件筛选条件返回
    getColumns(columns, checkList) {
      this.columns = columns
      this.checkList = checkList
    },
    // 自定义检索(popover组件(data为对象)和tag组件(data为数组))发射出来的事件
    tableUpdate(data) {
      this.$refs.filterTable.tableUpdate(data)
    },
  },
}
</script>

<style lang="scss" scoped>
.el-button {
  border: none;
  margin-bottom: 0;
}
::v-deep.pop-li {
  .el-button {
    color: black !important;
  }
  &:hover {
    background-color: $base-color-public;
    .el-button {
      color: $base-main-tone !important;
    }
  }
}
</style>

七、ZnFilterTable组件

<template>
  <div class="filter-table pt-10 pb-10">
    <!-- 表格 -->
    <el-table
      ref="table"
      :data="tableData"
      style="width: 100%"
      border
      stripe
      @selection-change="handleSelectionChange"
      @row-click="toDeatils"
    >
      <el-table-column
        type="selection"
        width="55"
        v-if="multiple"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in finallyColumns"
        :key="item.id"
        :label="item.label"
        align="center"
        :prop="item.name"
        min-width="130"
        show-overflow-tooltip
      >
        <template slot="header">
          <type-popover
            :columnIndex="index"
            :column="item"
            :filterOptions="item.param"
            @tableUpdate="tableUpdate"
          ></type-popover>
        </template>
        <template #default="{ row }">
          <!-- 每一列涉及value值判断显示label ,以及状态颜色 -->
          <span
            v-if="item.extra.columnStyle == 'labelTags'"
            :class="item.extra.labelTags[row.type.value]"
          >
            {{ row.type.label }}
          </span>
          <!-- 电话后面有电话图标 -->
          <span
            v-else-if="
              item.extra.columnStyle == 'labelCall' && row[item.name] != ''
            "
          >
            {{ row[item.name] }}
            <zn-icon class="column-label-call" icon="phone-fill" @click.stop="makeACall"/>
          </span>
          <!-- 性别、街道、居委、数据是对象{value:"",label:""} -->
          <span v-else-if="['sex','street','committee','source'].includes(item.name)">
            {{ row[item.name].label }}
          </span>
          <span v-else>{{ row[item.name] }}</span>
        </template>
      </el-table-column>
      <!-- 如有操作列 ↓-->
    </el-table>
  </div>
</template>
<script>
import TypePopover from './components/typePopover'

export default {
  name: 'ZnFilterTable',
  components: { TypePopover },
  props: {
    tableData: {
      type: Array, // table数据
      default: () => [],
    },
    finallyColumns: {
      type: Array, // table数据
      default: () => [],
    },
    multiple: {
      type: Boolean, // table数据
      default: () => false,
    },
    deatilsPath: {
      type: String, // table数据
      default: () => '',
    },
  },
  data() {
    return {
      conditionList: [],
      multipleSelection: [], //table多选数据
    }
  },
  computed: {},
  mounted() {},
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.$emit('selectList', this.multipleSelection)
    },
    // 自定义检索(popover组件(data为对象)和tag组件(data为数组))发射出来的事件
    tableUpdate(data) {
      let flag = true
      // 筛选条件如果已经存在，就更新,注意判别传递过来的数据类型
      // arr.constructor === Array
      if (Array.isArray(data)) {
        this.conditionList = JSON.parse(JSON.stringify(data))
        this.conditionList.forEach((item, index) => {
          if (item.fieldName == data.fieldName) {
            item.value = data.value
            flag = false
          }
        })
      } else if (data.fieldName) {
        this.conditionList.push(data) // 如果没有就添加
      }
      this.$parent.fetchData(this.conditionList)
    },
    toDeatils(row) {
      if (this.deatilsPath) {
        this.$router.push({ path: this.deatilsPath, query: row.id })
      } else {
        this.$baseMessage(
          '请配置所需要跳转的路径',
          'warning',
          'zn-hey-message-warning'
        )
      }
    },
    // 拨打电话
    makeACall(){

    },
  },
}
</script>
<style scoped lang='scss'>
// 占位，解决点击自己写的自定义筛选 会冒泡到排序
::v-deep .el-table__column-filter-trigger {
  display: none !important;
}
::v-deep.filter-table {
  // table状态标签颜色定义
  [class*='table-status'] {
    display: inline-block;
    border-radius: 2px;
    padding: 0px 12px;
  }
  // 蓝色
  [class*='table-status-blue'] {
    background: #e6effb;
    color: #005bd9;
  }
  // 棕色
  [class*='table-status-brown'] {
    background: #fff6ec;
    color: #ffa336;
  }
  // 绿色
  [class*='table-status-green'] {
    background: #e8fff0;
    color: #00b47e;
  }
  // 黄色
  [class*='table-status-yellow'] {
    background: #fffae8;
    color: #f9c200;
  }
  // 粉色
  [class*='table-status-pink'] {
    background: #ffece8;
    color: #f53f3f;
  }
  // 白色
  [class*='table-status-white'] {
    background: #f2f3f5;
    color: #1d2129;
  }
}
</style>

八、ZnPagination组件

<template>
  <div :class="{ hidden: hidden }" class="pagination-container">
    <el-pagination
    :style="{'text-align':algin}"
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { scrollTo } from '@/utils/scroll-to'

export default {
  name: 'ZnPagination',
  props: {
    total: {
      required: true,
      type: Number,
    },
    page: {
      type: Number,
      default: 1,
    },
    limit: {
      type: Number,
      default: 10,
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50]
      },
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper',
    },
    background: {
      type: Boolean,
      default: true,
    },
    autoScroll: {
      type: Boolean,
      default: true,
    },
    hidden: {
      type: Boolean,
      default: false,
    },
    algin: {
      type: String,
      default: ()=>'center',
    },
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      },
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      },
    },
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.pagination-container {
  background: #fff;
}
.pagination-container.hidden {
  display: none;
}
</style>

九、zn-query-form组件

<template>
  <el-row class="zn-query-form" :gutter="0">
    <slot />
  </el-row>
</template>

<script>
  export default {
    name: 'ZnQueryForm',
  }
</script>

<style lang="scss" scoped>
  @mixin panel {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    min-height: $base-input-height;
    margin: 0 0 #{math.div($base-margin, 2)} 0;
    > .el-button {
      margin: 0 10px #{math.div($base-margin, 2)} 0 !important;
    }
  }

  .zn-query-form {
    ::v-deep {
      .el-form-item:first-child {
        margin: 0 0 #{math.div($base-margin, 2)} 0 !important;
      }

      .el-form-item + .el-form-item {
        margin: 0 0 #{math.div($base-margin, 2)} 0 !important;

        .el-button {
          margin: 0 0 0 10px !important;
        }
      }

      .top-panel {
        @include panel;
      }

      .bottom-panel {
        @include panel;
        border-top: 1px solid #dcdfe6;
      }

      .left-panel {
        @include panel;
      }

      .right-panel {
        @include panel;
        justify-content: flex-end;
      }
    }
  }
</style>

十、zn-query-form-top-panel组件

<template>
  <el-col :span="24">
    <div class="top-panel">
      <slot />
    </div>
  </el-col>
</template>

<script>
  export default {
    name: 'ZnQueryFormTopPanel',
  }
</script>

十一、field-management组件

<template>
  <el-dropdown class="ml-10 mr-10" trigger="hover">
    <el-button type="text" size="medium" icon="el-icon-tickets">
      字段管理
    </el-button>
    <el-dropdown-menu slot="dropdown">
      <el-row :gutter="10" type="flex" class="row-flex">
        <el-col :span="6">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
          >
            勾选您要选择的字段
          </el-checkbox>
        </el-col>
        <el-divider />
        <el-checkbox-group
          v-if="options.length > 0"
          v-model="checkList"
          @change="handleCheckedChange"
        >
          <zn-draggable
            v-bind="dragOptions"
            :list="options"
            class="zn-draggable"
          >
            <el-col
              :span="24"
              class="checkbox-group-col"
              v-for="item in options"
              :key="item.id"
            >
              <!-- <zn-icon icon="drag-drop-line" /> -->
              <el-checkbox :label="item.label">
                {{ item.label }}
              </el-checkbox>
            </el-col>
          </zn-draggable>
        </el-checkbox-group>
      </el-row>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import ZnDraggable from 'vuedraggable'
import { getTableHeader } from '@/api/index'
export default {
  name: 'fieldManagement',
  components: {
    ZnDraggable,
  },
  inject: ['mark'],
  data() {
    return {
      checkAll: false,
      checkList: [],
      options: [],
      isIndeterminate: true,
    }
  },
  computed: {
    dragOptions() {
      return {
        animation: 600,
        group: 'description',
      }
    },
  },
  watch: {},
  created() {
    this.getHeader()
  },
  mounted() {},
  methods: {
    // 字段管理的接口是统一的 , 只有业务模块的mark标识不同 , 所以请求就写在了组件里
    async getHeader() {
      if (this.mark != '') {
        getTableHeader({
          mark: this.mark,
        }).then((res) => {
          this.options = res.data
          this.options.map((item) => {
            if (item.isShow == true) {
              this.checkList.push(item.label)
            }
          })
          this.$emit('setColumns', this.options, this.checkList)
        })
      }
    },
    // 操纵全选
    handleCheckAllChange(val) {
      if (val) {
        this.options.map((item) => {
          this.checkList.push(item.label)
        })
      } else {
        this.checkList = []
      }
      this.isIndeterminate = false
      // 向父组件发送数据
      this.$emit('setColumns', this.options, this.checkList)
    },
    // 单个数据选中
    handleCheckedChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.options.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.options.length
      // 向父组件发送数据
      this.$emit('setColumns', this.options, this.checkList)
    },
  },
}
</script>

<style lang="scss" scoped>
.row-flex {
  padding: 15px;
  display: flex;
  flex-direction: column;
}
.zn-draggable {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.checkbox-group-col {
  max-height: 100px;
  overflow-y: auto;

  .el-checkbox {
    padding: 3px 0;
    width: 100%;
    margin-right: 0;
    &:hover {
      background-color: $base-color-public;
    }
  }
}
</style>

十二、Search组件

<template>
  <div
    class="public-search"
    :class="{ isActive: isActive }"
    @click.stop="handleSearch"
  >
    <el-input
      v-model="searchText"
      class="search"
      ref="search"
      clearable
      prefix-icon="el-icon-search"
      placeholder="搜索"
      @input="searchHandler"
    ></el-input>
  </div>
</template>

<script>
export default {
  name: 'Search',
  components: {},
  props: {},
  data() {
    return {
      isActive: false,
      searchText: '',
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleSearch() {
      let _this = this
      this.isActive = true
      this.$refs.search.focus()
      function otherClick() {
        if (_this.searchText == '') {
          _this.isActive = false
          document.body.removeEventListener('click', otherClick)
        }
      }
      document.body.addEventListener('click', otherClick)
    },
    searchHandler() {
      this.$emit('up-Search',this.searchText) //改变搜索字段的value
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep.el-input,
.search {
  height: 100%;
  line-height: 34px;
  border: none;
  color: $base-color-black;
  padding: 0;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
  .el-input__inner {
    cursor: pointer;
    border: none;
  }
  .el-input__inner::placeholder {
    color: black !important;
  }
}
.public-search {
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid white;
}
::v-deep.isActive {
  border: 1px solid $base-main-tone;
  transition: all 0.3s ease-in-out;
}
</style>

十三、filter-tag组件

<template>
  <!-- 条件tag -->
  <div class="filter-tag ml-10 mr-10">
    <!-- <div class="filter-tag-title pt-10 pb-10">筛选条件：</div> -->
    <el-tag
      @close="conditionClose(index)"
      style="margin-left: 10px"
      v-for="(tag, index) in list"
      :key="index"
      closable
      :type="tag.prop"
    >
      <span>{{ tag.tagLabel }} ：</span>
      <span style="color: red">{{ tag.tagValue }}</span>
    </el-tag>
  </div>
</template>

<script>
export default {
  name: 'filterTag',
  components: {},
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    conditionClose(index) {
      this.list.splice(index, 1) // 关闭条件tag-发射给父组件 删除已选中的
      this.$emit('up-table', this.list) //  传递的是数组 并更新列表数据
    },
  },
}
</script>

<style lang="scss" scoped>
.filter-tag {
  display: inline-block;
  .filter-tag-title {
    @extend .filter-tag;
  }
}
</style>

十四、typePopover组件

<template>
  <!-- 每个table表头的popover -->
  <!-- 注意：逻辑部分尽量不好写到这个组件内，因为这个组件是根据外面table循环创建的，在这里写逻辑会非常影响性能 -->
  <div class="customHeader" style="display: inline-block">
    <el-popover
      placement="bottom"
      trigger="click"
      :ref="`popover-${columnIndex}`"
    >
      <!-- table表头文字显示-->
      <span slot="reference" class="label">
        <zn-icon :icon="column.extra.icon" />
        {{ column.label }} &nbsp;
        <i class="el-icon-arrow-down"></i>
      </span>
      <!-- text 文本 -->
      <div v-if="column.type == 'text'">
        <el-input
          clearable
          v-model.trim="filterForm.value"
          placeholder="请输入查询内容"
          @keyup.native.enter="confirm()"
        ></el-input>
      </div>
      <!-- number 数字框 -->
      <div v-else-if="column.type == 'number'">
        <el-input
          clearable
          oninput="value=value.replace(/[^0-9.]/g,'')"
          v-model.trim="filterForm.value"
          placeholder="请输入数字"
          @keyup.native.enter="confirm()"
        ></el-input>
      </div>
      <!-- number_range 数字范围-->
      <div v-else-if="column.type == 'number_range'">
        <el-input
          style="width: 120px"
          clearable
          oninput="value=value.replace(/[^0-9.]/g,'')"
          v-model.trim="filterForm.value"
          placeholder="请输入数字"
        ></el-input>
        -
        <el-input
          style="width: 120px"
          clearable
          oninput="value=value.replace(/[^0-9.]/g,'')"
          v-model.trim="spareValue"
          placeholder="请输入数字"
        ></el-input>
      </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>
      <!-- datetime 日期时间-->
      <div v-else-if="column.type == 'datetime'">
        <el-date-picker
          v-model="filterForm.value"
          type="datetime"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </div>
      <!-- date_range 日期范围-->
      <div v-else-if="column.type == 'date_range'">
        <el-date-picker
          v-model="filterForm.value"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </div>
      <!-- datetime_range 日期时分秒范围-->
      <div v-else-if="column.type == 'datetime_range'">
        <el-date-picker
          v-model="filterForm.value"
          clearable
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </div>
      <!-- select 下拉选择-->
      <div v-else-if="column.type == 'select'">
        <el-select
          v-model="filterForm.value"
          placeholder="请选择"
          style="width: 100%"
          clearable
        >
          <el-option
            v-for="(item, index) in filterOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <!-- radio 单选-->
      <div v-else-if="column.type == 'radio'">
        <el-radio-group v-model="filterForm.value">
          <el-radio
            v-for="(item, index) in filterOptions"
            :key="index"
            :label="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </div>
      <!-- checkBox 多选-->
      <div v-else-if="column.type == 'checkBox'">
        <el-checkbox-group v-model="checkboxList">
          <el-checkbox
            v-for="(item, index) in filterOptions"
            :key="index"
            :label="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
      </div>

      <!-- confirm 确定框-->
      <div style="text-align: right">
        <el-button
          @click="confirm()"
          type="primary"
          size="mini"
          class="confirm"
        >
          确定
        </el-button>
      </div>
    </el-popover>
  </div>
</template>
<script>
export default {
  name: 'typePopover',
  // column 当前列数据，filterOptions 多选/单选/下拉/数据
  props: ['column', 'filterOptions', 'columnIndex'],
  data() {
    return {
      filterForm: {
        tagLabel: this.column.label, //筛选tag label(tag用)
        tagValue: '', //筛选tag value(tag用)
        value: '', //所筛选的数据(后端接收用)
        fieldName: this.column.name, //当前表头字段(后端接收用)
      },
      spareValue: '', //备用Value popover里如是两个值的话需要用此来拼接
      checkboxList: [],
    }
  },
  created() {},
  methods: {
    confirm() {
      let minValue = this.filterForm.value //数值双向绑定  做个闭环赋值
      let type = this.column.type
      // 跟后端商定 , 多个值存在时进行判断 , 以filterForm.value一个值为字符串的形式传递
      // 根据需求做了处理
      // checkBox和radio和select由于value值的原因需要处理
      if (type == 'checkBox' || type == 'radio' || type == 'select') {
        if (type == 'checkBox') {
          this.filterForm.value = this.checkboxList.join(',')
        }
        if (this.column.param && this.column.param.length > 0) {
          let str = ''
          this.column.param.forEach((i, t) => {
            if (type == 'checkBox' && i.value == Number(this.checkboxList[t])) {
              str = str + i.label
            }
            if (type == 'radio' && i.value == Number(this.filterForm.value)) {
              str = str + i.label
            }
            if (type == 'select' && i.value == Number(this.filterForm.value)) {
              str = str + i.label
            }
          })
          this.filterForm.tagValue = str
        }
      }
      // 数字范围
      else if (type == 'number_range') {
        this.filterForm.tagValue =
          this.filterForm.value + ' - ' + this.spareValue
        this.filterForm.value = this.filterForm.value + ',' + this.spareValue
      } else if (this.filterForm.value == '' && !this.spareValue) {
        return this.$message.warning('请输入或选择筛选条件')
      } else {
        this.filterForm.tagValue = this.filterForm.value //其他类型的赋值给tag用
      }
      this.$emit('tableUpdate', this.filterForm) //传递的是对象
      this.filterForm.value = minValue //数值双向绑定  做个闭环赋值 ,俗称瞒天过海
      this.$refs['popover-' + this.columnIndex].doClose() // 关闭popover
    },
  },
}
</script>
<style scoped>
.confirm {
  margin-top: 10px;
}
/* 禁止双击选中文字 */
.label {
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none !important; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
}
.labelColor {
  color: #409eff;
}
.el-icon-arrow-down {
  cursor: pointer;
}

.el-checkbox-group {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  max-height: 150px;
  overflow-y: auto;
}
</style>

十五、接口示例数据

  1. getHeader 字段管理数据格式
this.getHeader()
async getHeader(){
	return [
        {
          id: 0,
          name: 'name',
          label: '姓名',
          type: 'text',
          param: '',
          isShow: true,
          exp: '',
          extra: {
            icon: 'file-list-line',
          },
        },
        {
          id: 1,
          name: 'age',
          label: '年龄',
          type: 'number_range',
          param: '',
          isShow: true,
          exp: 'age',
          extra: {
            icon: 'file-list-line',
          },
        },
        {
          id: 2,
          name: 'phone_main',
          label: '主要电话',
          type: 'text',
          param: '',
          isShow: true,
          exp: '',
          extra: {
            icon: 'file-list-line',
            columnStyle: 'labelCall',
          },
        },
        {
          id: 3,
          name: 'phone_backup',
          label: '备用电话',
          type: '',
          param: '',
          isShow: true,
          exp: '',
          extra: {
            icon: 'file-list-line',
          },
        },
        {
          id: 4,
          name: 'id_card',
          label: '身份证号',
          type: '',
          param: '',
          isShow: true,
          exp: '',
          extra: {
            icon: 'file-list-line',
          },
        },
        {
          id: 5,
          name: 'birth_day',
          label: '生日',
          type: 'date_range',
          param: '',
          isShow: true,
          exp: '',
          extra: {
            icon: 'file-list-line',
          },
        },
        {
          id: 6,
          name: 'sex',
          label: '性别',
          type: 'select',
          param: [
            {
              label: '未知',
              value: 0,
            },
            {
              label: '男',
              value: 1,
            },
            {
              label: '女',
              value: 2,
            },
          ],
          isShow: true,
          exp: '',
          extra: {
            icon: 'file-list-line',
          },
        },
        {
          id: 7,
          name: 'type',
          label: '老人类型',
          type: 'select',
          param: [
            {
              value: 101,
              label: '独居',
            },
            {
              value: 102,
              label: '孤老',
            },
            {
              value: 103,
              label: '失独',
            },
            {
              value: 104,
              label: '其他',
            },
          ],
          isShow: true,
          exp: '',
          extra: {
            icon: 'file-list-line',
            columnStyle: 'labelTags',
            labelTags: {
              101: 'table-status-blue',
              102: 'table-status-brown',
              103: 'table-status-green',
              104: 'table-status-yellow',
            },
          },
        },
        {
          id: 8,
          name: 'street',
          label: '街道',
          type: 'text',
          param: '',
          isShow: true,
          exp: 'street',
          extra: {
            icon: 'file-list-line',
          },
        },
        {
          id: 9,
          name: 'committee',
          label: '居委',
          type: 'text',
          param: '',
          isShow: true,
          exp: '',
          extra: {
            icon: 'file-list-line',
          },
        },
        {
          id: 10,
          name: 'address',
          label: '详细地址',
          type: 'text',
          param: '',
          isShow: true,
          exp: '',
          extra: {
            icon: 'file-list-line',
          },
        },
        {
          id: 11,
          name: 'reg_address',
          label: '户籍地址',
          type: 'text',
          param: '',
          isShow: true,
          exp: '',
          extra: {
            icon: 'file-list-line',
          },
        },
        {
          id: 12,
          name: 'source',
          label: '来源',
          type: 'select',
          param: [],
          isShow: true,
          exp: '',
          extra: {
            icon: 'file-list-line',
          },
        },
        {
          id: 13,
          name: 'create_time',
          label: '创建时间',
          type: 'datetime_range',
          param: '',
          isShow: true,
          exp: '',
          extra: {
            icon: 'file-list-line',
          },
        },
        {
          id: 14,
          name: 'update_time',
          label: '更新时间',
          type: 'datetime_range',
          param: '',
          isShow: true,
          exp: '',
          extra: {
            icon: 'file-list-line',
          },
        },
        {
          id: 15,
          name: 'create_user_id',
          label: '创建人',
          type: '',
          param: '',
          isShow: true,
          exp: '',
          extra: {
            icon: 'file-list-line',
          },
        },
        {
          id: 16,
          name: 'update_user_id',
          label: '更新人',
          type: '',
          param: '',
          isShow: true,
          exp: '',
          extra: {
            icon: 'file-list-line',
          },
        },
      ]
}
  1. fetchData 列表数据格式
async fetchData() {
	return [
        {
          id: 1,
          type: {
            value: 101,
            label: '独居',
          },
          name: '柳倩倩',
          marital_status: {
            value: 0,
            label: '--',
          },
          phone_main: '021556XXXX',
          phone_backup: '1822127XXXX',
          id_card: '3505831992022XXXX',
          birth_day: '1976-03-02',
          tags: ['123124'],
          sex: {
            value: 1,
            label: '男',
          },
          province: {
            value: '31',
            label: '上海市',
          },
          city: {
            value: '3101',
            label: '市辖区',
          },
          area: {
            value: '310117',
            label: '松江区',
          },
          street: {
            value: '310117501',
            label: '松江工业区',
          },
          committee: {
            value: '310117501498',
            label: '松江工业区虚拟社区',
          },
          address: '泰晤士小镇',
          reg_address: '户籍',
          remark: '',
          status: 1,
          general_info: '',
          medical_card: null,
          blood_type: {
            value: 'A',
            label: 'A',
          },
          health_info: '',
          physical_condition: null,
          basic_info: null,
          allergic_drugs: null,
          medical_records: null,
          is_contract: 0,
          contract_imgs: [],
          source: {
            value: '',
            label: ' -- ',
          },
          create_time: '2022-01-18 10:52:45',
          update_time: '2022-04-06 18:28:28',
          create_user_id: 0,
          update_user_id: 0,
          contract: {
            value: 1,
            label: '幸福久久',
          },
          category: [],
          frequency: {
            value: '',
            label: ' -- ',
          },
          service_start: null,
          service_end: null,
          service_status: {
            value: 1,
            label: '正常',
          },
          service_cancel_reason: {
            value: 0,
            label: '--',
          },
          agent_id: {
            value: 1,
            label: 'admin',
          },
          age: 46,
        },
        {
          id: 2,
          type: {
            value: 102,
            label: '孤老',
          },
          name: '潘宗磊',
          marital_status: {
            value: 0,
            label: '--',
          },
          phone_main: '13822XXXX',
          phone_backup: '188176XXXX',
          id_card: '342401198812XXXX',
          birth_day: '1988-12-14',
          tags: ['老人', '身体不便', '高血压'],
          sex: {
            value: 2,
            label: '女',
          },
          province: {
            value: '34',
            label: '安徽省',
          },
          city: {
            value: '3415',
            label: '六安市',
          },
          area: {
            value: '341503',
            label: '裕安区',
          },
          street: {
            value: '310117006',
            label: '九里亭街道',
          },
          committee: {
            value: '341503105205',
            label: '泉水村委会',
          },
          address: '泉水冲',
          reg_address: '上海市松江区泰晤士小镇',
          remark: '备注111',
          status: 1,
          general_info: '',
          medical_card: '123123',
          blood_type: {
            value: 'AB',
            label: 'AB',
          },
          health_info: '',
          physical_condition:
            '<p><font color="#c24f4a"><b><i>正常</i></b></font><span style="font-size: 14px;"></span></p>',
          basic_info: '<p>11</p>',
          allergic_drugs: '<p>22</p>',
          medical_records: '<p>33</p>',
          is_contract: 0,
          contract_imgs: [],
          source: {
            value: '',
            label: ' -- ',
          },
          create_time: '2022-01-18 11:01:06',
          update_time: '2022-04-09 15:38:23',
          create_user_id: 0,
          update_user_id: 0,
          contract: {
            value: 1,
            label: '幸福久久',
          },
          category: ['2', '3'],
          frequency: {
            value: 1,
            label: '一周两次',
          },
          service_start: '2022-04-20',
          service_end: '2022-04-30',
          service_status: {
            value: 2,
            label: '取消',
          },
          service_cancel_reason: {
            value: 3,
            label: '搬迁',
          },
          agent_id: {
            value: 1,
            label: 'admin',
          },
          age: 33,
        },
        {
          id: 3,
          type: {
            value: 103,
            label: '失独',
          },
          name: '宋岩',
          marital_status: {
            value: 0,
            label: '--',
          },
          phone_main: '',
          phone_backup: '139XXXX',
          id_card: '350583XXXX',
          birth_day: '2022-01-13',
          tags: [],
          sex: {
            value: 1,
            label: '男',
          },
          province: {
            value: '31',
            label: '上海市',
          },
          city: {
            value: '3101',
            label: '市辖区',
          },
          area: {
            value: '310117',
            label: '松江区',
          },
          street: {
            value: '310117001',
            label: '岳阳街道',
          },
          committee: {
            value: '310117001002',
            label: '醉白池社区居委会',
          },
          address: '新凯城',
          reg_address: null,
          remark: '',
          status: 1,
          general_info: '',
          medical_card: null,
          blood_type: {
            value: 'A',
            label: 'A',
          },
          health_info: '',
          physical_condition: null,
          basic_info: null,
          allergic_drugs: null,
          medical_records: null,
          is_contract: 0,
          contract_imgs: [],
          source: {
            value: '',
            label: ' -- ',
          },
          create_time: '2022-01-18 11:42:19',
          update_time: '2022-02-15 15:07:14',
          create_user_id: 0,
          update_user_id: 0,
          contract: {
            value: 1,
            label: '幸福久久',
          },
          category: [],
          frequency: {
            value: '',
            label: ' -- ',
          },
          service_start: null,
          service_end: null,
          service_status: {
            value: 1,
            label: '正常',
          },
          service_cancel_reason: {
            value: 0,
            label: '--',
          },
          agent_id: {
            value: 1,
            label: 'admin',
          },
          age: 0,
        },
        {
          id: 4,
          type: {
            value: 104,
            label: '其他',
          },
          name: '李三',
          marital_status: {
            value: 0,
            label: '--',
          },
          phone_main: '',
          phone_backup: '139173XXXX',
          id_card: '350583199XXXX',
          birth_day: '2022-01-04',
          tags: [],
          sex: {
            value: 1,
            label: '男',
          },
          province: {
            value: '12',
            label: '天津市',
          },
          city: {
            value: '1201',
            label: '市辖区',
          },
          area: {
            value: '120103',
            label: '河西区',
          },
          street: {
            value: '120103002',
            label: '下瓦房街道',
          },
          committee: {
            value: '120103002003',
            label: '台北路社区居委会',
          },
          address: '发达',
          reg_address: null,
          remark: '',
          status: 1,
          general_info: '',
          medical_card: null,
          blood_type: {
            value: '',
            label: ' -- ',
          },
          health_info: '',
          physical_condition: null,
          basic_info: null,
          allergic_drugs: null,
          medical_records: null,
          is_contract: 0,
          contract_imgs: [],
          source: {
            value: '',
            label: ' -- ',
          },
          create_time: '2022-01-18 12:03:59',
          update_time: '2022-02-18 17:01:12',
          create_user_id: 0,
          update_user_id: 0,
          contract: {
            value: 1,
            label: '幸福久久',
          },
          category: [],
          frequency: {
            value: '',
            label: ' -- ',
          },
          service_start: null,
          service_end: null,
          service_status: {
            value: 1,
            label: '正常',
          },
          service_cancel_reason: {
            value: 0,
            label: '--',
          },
          agent_id: {
            value: 1,
            label: 'admin',
          },
          age: 0,
        },
        {
          id: 5,
          type: {
            value: 102,
            label: '孤老',
          },
          name: '张三',
          marital_status: {
            value: 0,
            label: '--',
          },
          phone_main: '',
          phone_backup: '182212XXXX',
          id_card: '51382219941XXXX',
          birth_day: '1994-11-30',
          tags: [],
          sex: {
            value: 1,
            label: '男',
          },
          province: {
            value: '31',
            label: '上海市',
          },
          city: {
            value: '3101',
            label: '市辖区',
          },
          area: {
            value: '310117',
            label: '松江区',
          },
          street: {
            value: '310117004',
            label: '中山街道',
          },
          committee: {
            value: '310117004014',
            label: '中山苑社区居委会',
          },
          address: '泰晤士小镇卡纳比岛',
          reg_address: null,
          remark: '',
          status: 1,
          general_info: '',
          medical_card: null,
          blood_type: {
            value: 'O',
            label: 'O',
          },
          health_info: '',
          physical_condition: null,
          basic_info: null,
          allergic_drugs: null,
          medical_records: null,
          is_contract: 0,
          contract_imgs: [],
          source: {
            value: '',
            label: ' -- ',
          },
          create_time: '2022-01-18 12:05:45',
          update_time: '2022-01-25 17:34:37',
          create_user_id: 0,
          update_user_id: 0,
          contract: {
            value: 1,
            label: '幸福久久',
          },
          category: [],
          frequency: {
            value: '',
            label: ' -- ',
          },
          service_start: null,
          service_end: null,
          service_status: {
            value: 1,
            label: '正常',
          },
          service_cancel_reason: {
            value: 0,
            label: '--',
          },
          agent_id: {
            value: 1,
            label: 'admin',
          },
          age: 27,
        },
        {
          id: 6,
          type: {
            value: 102,
            label: '孤老',
          },
          name: '陈情期',
          marital_status: {
            value: 0,
            label: '--',
          },
          phone_main: '0215567252',
          phone_backup: '18817XXXX',
          id_card: '35058319920XXXX',
          birth_day: '2022-01-05',
          tags: [],
          sex: {
            value: 2,
            label: '女',
          },
          province: {
            value: '31',
            label: '上海市',
          },
          city: {
            value: '3101',
            label: '市辖区',
          },
          area: {
            value: '310117',
            label: '松江区',
          },
          street: {
            value: '310117501',
            label: '松江工业区',
          },
          committee: {
            value: '310117501498',
            label: '松江工业区虚拟社区',
          },
          address: '新凯城',
          reg_address: null,
          remark: '',
          status: 1,
          general_info: '',
          medical_card: null,
          blood_type: {
            value: 'A',
            label: 'A',
          },
          health_info: '',
          physical_condition: null,
          basic_info: null,
          allergic_drugs: null,
          medical_records: null,
          is_contract: 0,
          contract_imgs: [],
          source: {
            value: '',
            label: ' -- ',
          },
          create_time: '2022-01-18 14:44:58',
          update_time: '2022-02-17 14:39:08',
          create_user_id: 0,
          update_user_id: 0,
          contract: {
            value: 1,
            label: '幸福久久',
          },
          category: [],
          frequency: {
            value: '',
            label: ' -- ',
          },
          service_start: null,
          service_end: null,
          service_status: {
            value: 1,
            label: '正常',
          },
          service_cancel_reason: {
            value: 0,
            label: '--',
          },
          agent_id: {
            value: 1,
            label: 'admin',
          },
          age: 0,
        },
        {
          id: 7,
          type: {
            value: 102,
            label: '孤老',
          },
          name: '李斯',
          marital_status: {
            value: 0,
            label: '--',
          },
          phone_main: '0215567252',
          phone_backup: '18221XXXX',
          id_card: '513822199411XXXX',
          birth_day: '2019-01-18',
          tags: [],
          sex: {
            value: 0,
            label: '未知',
          },
          province: {
            value: '51',
            label: '四川省',
          },
          city: {
            value: '5101',
            label: '成都市',
          },
          area: {
            value: '510104',
            label: '锦江区',
          },
          street: {
            value: '510104017',
            label: '锦官驿街道',
          },
          committee: {
            value: '510104017001',
            label: '水井坊社区居委会',
          },
          address: '卡纳比岛',
          reg_address: null,
          remark: '',
          status: 1,
          general_info: '',
          medical_card: null,
          blood_type: {
            value: 'A',
            label: 'A',
          },
          health_info: '良好',
          physical_condition: null,
          basic_info: null,
          allergic_drugs: null,
          medical_records: null,
          is_contract: 0,
          contract_imgs: [],
          source: {
            value: '',
            label: ' -- ',
          },
          create_time: '2022-01-18 15:14:29',
          update_time: '2022-02-19 17:32:08',
          create_user_id: 0,
          update_user_id: 0,
          contract: {
            value: 1,
            label: '幸福久久',
          },
          category: [],
          frequency: {
            value: '',
            label: ' -- ',
          },
          service_start: null,
          service_end: null,
          service_status: {
            value: 1,
            label: '正常',
          },
          service_cancel_reason: {
            value: 0,
            label: '--',
          },
          agent_id: {
            value: 1,
            label: 'admin',
          },
          age: 3,
        },
        {
          id: 8,
          type: {
            value: 102,
            label: '孤老',
          },
          name: '李请',
          marital_status: {
            value: 0,
            label: '--',
          },
          phone_main: '0215567252',
          phone_backup: '18221XXXX',
          id_card: '3505831992XXXX',
          birth_day: '2022-01-04',
          tags: [],
          sex: {
            value: 1,
            label: '男',
          },
          province: {
            value: '31',
            label: '上海市',
          },
          city: {
            value: '3101',
            label: '市辖区',
          },
          area: {
            value: '310117',
            label: '松江区',
          },
          street: {
            value: '310117501',
            label: '松江工业区',
          },
          committee: {
            value: '310117501498',
            label: '松江工业区虚拟社区',
          },
          address: '泰晤士小镇',
          reg_address: null,
          remark: '',
          status: 1,
          general_info: '',
          medical_card: null,
          blood_type: {
            value: 'A',
            label: 'A',
          },
          health_info: '',
          physical_condition: null,
          basic_info: null,
          allergic_drugs: null,
          medical_records: null,
          is_contract: 0,
          contract_imgs: [],
          source: {
            value: '',
            label: ' -- ',
          },
          create_time: '2022-01-18 15:42:02',
          update_time: '2022-01-25 17:33:23',
          create_user_id: 0,
          update_user_id: 0,
          contract: {
            value: 1,
            label: '幸福久久',
          },
          category: [],
          frequency: {
            value: '',
            label: ' -- ',
          },
          service_start: null,
          service_end: null,
          service_status: {
            value: 1,
            label: '正常',
          },
          service_cancel_reason: {
            value: 0,
            label: '--',
          },
          agent_id: {
            value: 1,
            label: 'admin',
          },
          age: 0,
        },
        {
          id: 9,
          type: {
            value: 102,
            label: '孤老',
          },
          name: '柳慢慢',
          marital_status: {
            value: 0,
            label: '--',
          },
          phone_main: '0215XXXX',
          phone_backup: '182212XXXX',
          id_card: '3505831992022XXXX',
          birth_day: '1945-06-05',
          tags: [],
          sex: {
            value: 1,
            label: '男',
          },
          province: {
            value: '31',
            label: '上海市',
          },
          city: {
            value: '3101',
            label: '市辖区',
          },
          area: {
            value: '310117',
            label: '松江区',
          },
          street: {
            value: '310117001',
            label: '岳阳街道',
          },
          committee: {
            value: '310117001001',
            label: '龙潭社区居委会',
          },
          address: '新凯城',
          reg_address: null,
          remark: '',
          status: 1,
          general_info: '',
          medical_card: null,
          blood_type: {
            value: 'A',
            label: 'A',
          },
          health_info: '',
          physical_condition: null,
          basic_info: null,
          allergic_drugs: null,
          medical_records: null,
          is_contract: 0,
          contract_imgs: [],
          source: {
            value: '',
            label: ' -- ',
          },
          create_time: '2022-01-18 19:58:02',
          update_time: '2022-02-16 11:18:17',
          create_user_id: 0,
          update_user_id: 0,
          contract: {
            value: 1,
            label: '幸福久久',
          },
          category: [],
          frequency: {
            value: '',
            label: ' -- ',
          },
          service_start: null,
          service_end: null,
          service_status: {
            value: 1,
            label: '正常',
          },
          service_cancel_reason: {
            value: 0,
            label: '--',
          },
          agent_id: {
            value: 1,
            label: 'admin',
          },
          age: 76,
        },
        {
          id: 10,
          type: {
            value: 102,
            label: '孤老',
          },
          name: '小千',
          marital_status: {
            value: 0,
            label: '--',
          },
          phone_main: '',
          phone_backup: '1822XXXX',
          id_card: '3505831992XXXX',
          birth_day: '2022-01-03',
          tags: [],
          sex: {
            value: 1,
            label: '男',
          },
          province: {
            value: '31',
            label: '上海市',
          },
          city: {
            value: '3101',
            label: '市辖区',
          },
          area: {
            value: '310117',
            label: '松江区',
          },
          street: {
            value: '310117001',
            label: '岳阳街道',
          },
          committee: {
            value: '310117001001',
            label: '龙潭社区居委会',
          },
          address: '新凯城',
          reg_address: null,
          remark: '',
          status: 1,
          general_info: '',
          medical_card: null,
          blood_type: {
            value: 'B',
            label: 'B',
          },
          health_info: '',
          physical_condition: null,
          basic_info: null,
          allergic_drugs: null,
          medical_records: null,
          is_contract: 0,
          contract_imgs: [],
          source: {
            value: '',
            label: ' -- ',
          },
          create_time: '2022-01-18 20:00:32',
          update_time: '2022-01-25 17:33:03',
          create_user_id: 0,
          update_user_id: 0,
          contract: {
            value: 1,
            label: '幸福久久',
          },
          category: [],
          frequency: {
            value: '',
            label: ' -- ',
          },
          service_start: null,
          service_end: null,
          service_status: {
            value: 1,
            label: '正常',
          },
          service_cancel_reason: {
            value: 0,
            label: '--',
          },
          agent_id: {
            value: 1,
            label: 'admin',
          },
          age: 0,
        },
      ]
}

十六、版本升级

注明：此文升级版=>在这
升级版github源码链接在这

十七、完

总结，可能后续还会进行改动 ， 我会尽可能的抽时间去更新它，里面的代码有写的不好的地方多多见谅，数据的处理也是被逼无奈，希望有所帮助的同学能够一键三连

李泽举
关注
  • 37
    点赞
  • 踩
  • 148
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 17
    评论
专栏目录
SpringBoot+Vue实现el-table表头筛选排序（附源码）
无所谓^_^博客
03-04 1572
后台系统对table组件的需求是最常见的，不过element-ui的el-table组件只是能满足最基本的需求而已。本篇文章就是对table组件进行自定义，实现列的自定义排序、筛选功能。替换掉原来的输入框搜索。
vue element 中的table动态渲染实现（动态表头）
10-15
本文将深入探讨如何在Vue Element环境中实现表格的动态渲染，特别是动态表头的功能。 首先，动态渲染的核心在于能够根据不同的数据源自动生成对应的表格结构。在Element UI的`el-table`组件中，我们可以通过`v-for`...
vue3 + elementUI 自定义表单校验规则与表头排序和筛选
Tyler961123的博客
10-15 1555
功能需求，完成公司内部项目的用户模块的增删改查功能，并使用列表展示，可以进行数据筛选。1. 新建用户，用户名唯一；2. 分页筛选，可以根据用户名邮箱等查询；3. 表格数据筛选功能，根据表头的字段进行排序或者筛选。
打造你的专属Vue组件：超实用“高级筛选弹窗组件“实战
最新发布
小猿同学628的博客
06-01 397
在现代前端开发中，组件化思想是提高开发效率、维护性和代码复用性的关键。本文将通过一个实例——创建一个自定义的“高级筛选”弹窗组件，来展示如何在Vue框架下利用Composition API和Element Plus构建功能丰富且易于集成的UI组件。下面的代码示例不仅展示了组件的结构、样式定制，还涉及了事件处理和属性传递，是一个全面的组件开发教程。
Element - el-table 表头列字段筛选 支持一个页面多table
bug制造者
11-03 3394
Element - el-table 表头列字段筛选 支持一个页面多table
Vue+Element Ui实现el-table自定义表头下拉选择表头筛选
Yongqiang Chen的博客
01-11 5372
el-input size="small" placeholder="请输入关键字" v-model="cloumnKeyword" clearable>// 操作按钮组 === label: 文本，show：是否显示，icon：按钮图标，disabled：是否禁用，method：回调方法, 等等。defaultColumns: ["操作", "日期", "姓名", "地址"],totalColumns: ["操作", "日期", "姓名", "地址"],
2024年前端最新通过cdn和vue，前端开发培训零基础
yjqdn82212的博客
05-07 178
为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vue3 antd项目实战——table表格的自定义筛选【纯前端filters过滤、自定义筛选table表格数据】
XSL_HR的博客
01-05 1万+
vue3 ant design vue搭建的后台管理系统中，使用filters属性自定义筛选table表格中大量的数据。文章将通过三个实例详细介绍如何实现table表格的表头自定义筛选
el-table如何实现筛选功能，以及filters,filter_method详解
热门推荐
m0_51312071的博客
05-20 1万+
在 ElementUI 的 el-table 组件中，提供了一个 el-table-column 组件的 filters 属性，可以用于对表格数据进行筛选操作。在 ElementUI 的 el-table 组件中，el-table-column 组件的 filters 属性确实是用于定义筛选菜单的选项列表。在上面的代码中，我们在 data 函数中定义了筛选菜单和表格数据，当用户选择某个筛选菜单项后，filterMethod 函数会根据选项的值对表格数据进行过滤，只保留符合条件的行。
el-tabl 表头自定义筛选过滤
co2021的博客
10-26 1323
el-table-column align="center" prop="customerCode" label="客户编码" min-width="120" sortable :render-header='renderHeader'></el-table-column>使用方式 引入import filterData from './filterData'主要代码 renderHeader属性。
el-table表头自定义筛选的实现
qq_36396822的博客
02-15 6350
el-table表头自定义筛选
el-table筛选数据
Pert的博客
08-02 4760
el-table
element-ui组件table实现自定义筛选功能的示例代码
10-17
主要介绍了element-ui组件table实现自定义筛选功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue实现element表格里表头信息提示功能(推荐)
10-15
在Vue和Element UI框架中，实现表格表头信息提示功能是一项常见的需求，这有助于提高用户交互体验，通过显示额外的提示信息帮助用户理解表格各列的具体含义或操作。以下将详细解析如何通过Vue来实现这一功能。 首先...
vue表单筛选
luemeon的博客
07-31 1059
确定要删除数据吗?
vue3+a-table增加表头筛选
weixin_42234899的博客
03-07 602
vue3+a-table增加表头筛选
element table手动实现自定义筛选（手动实现）
m0_60067716的博客
01-27 7506
最开始尝试使用的element官方的筛选，给甲方看后 说和excel的筛选相差很大。。好在官方有提供自定义表头，那自己手动实现一个了。最后有完整代码
vue elementUI 实现el-table 表头筛选，表头排序功能
nsnydnz的博客
10-26 5748
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录 表头筛选、排序功能： image.png 可以做前端筛选，排序，（存在问题，前端无法对所有数据进行筛选或者排序，只能对当页数据。 所以前端做这种处理只适用于数据量少，无分页情况或者前端一次拿到了所有数据自己分页的情况） 调用后端接口进行筛选，或者排序，好处是能对全部数据进行筛选或
element表格自定义筛选
老衲的少女心i~
10-31 1742
待续提示：以下是本篇文章正文内容，下面案例可供参考修改el-table的筛选…待续例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
vue实现el-table表头自定义
05-10
Vue.js 是一个流行的JavaScript框架，它的数据绑定和组件化特性使得开发动态Web应用变得更加容易。其中，强大的UI组件库（如Element，iView等）能够极大地提高Web应用开发效率。而el-table是一种用于展示表格数据的组件，它拥有可排序、过滤、分页等多种功能。本文主要介绍如何使用Vue.js实现el-table表头自定义。 在Vue.js中使用el-table组件时，表头（thead）用于显示列名和控制排序、过滤等操作。默认情况下，el-table组件根据数据源中的列名自动生成表头。若需自定义表头，可通过以下方式实现： 1. 使用el-table-column组件 在el-table中使用el-table-column组件可以实现自定义表头。具体操作如下： ```html <el-table :data="tableData"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> ``` 上述代码中，我们为el-table添加了三个el-table-column组件，分别对应表格中的三列数据。同时，我们在每个el-table-column组件上指定了prop和label属性，其中prop属性指定了对应的数据源中的字段名，label属性指定了表头标题。 2. 使用Scoped Slots 如果需要实现更加复杂的表头，可以使用Scoped Slots进行自定义。具体操作如下： ```html <el-table :data="tableData"> <template slot="header"> <el-row> <el-col :span="8">日期</el-col> <el-col :span="8">姓名</el-col> <el-col :span="8">地址</el-col> </el-row> </template> <el-table-column prop="date"></el-table-column> <el-table-column prop="name"></el-table-column> <el-table-column prop="address"></el-table-column> </el-table> ``` 上述代码中，我们使用了el-table的header slot，它可以让我们自定义表头，即在表头中添加任意HTML代码。在header slot中我们使用了el-row和el-col组件创建了一个表头行，然后通过span属性设置每列所占的宽度，最终实现了自定义表头。 总结 以上就是Vue.js实现el-table表头自定义的两种方式。使用el-table-column组件可以快速地实现简单的自定义表头，而使用Scoped Slots可以实现更加复杂的表头需求。选择合适的方式，可以大大提高开发效率和表格的可读性。
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李泽举

如对你有帮助,那我就没白写

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值