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 1583
后台系统对table组件的需求是最常见的，不过element-ui的el-table组件只是能满足最基本的需求而已。本篇文章就是对table组件进行自定义，实现列的自定义排序、筛选功能。替换掉原来的输入框搜索。
vue3 + elementUI 自定义表单校验规则与表头排序和筛选
Tyler961123的博客
10-15 1559
功能需求，完成公司内部项目的用户模块的增删改查功能，并使用列表展示，可以进行数据筛选。1. 新建用户，用户名唯一；2. 分页筛选，可以根据用户名邮箱等查询；3. 表格数据筛选功能，根据表头的字段进行排序或者筛选。
VUE element-ui之table表格表头下拉筛选功能_vue表头筛选全部功能
最新发布
2401_84616230的博客
05-08 597
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；第一阶段：HTML&CSS&JavaScript基础。第二阶段:移动端开发技术。第三阶段:前端常用框架。
vue3+a-table增加表头筛选
weixin_42234899的博客
03-07 612
vue3+a-table增加表头筛选
Element - el-table 表头列字段筛选 支持一个页面多table
bug制造者
11-03 3401
Element - el-table 表头列字段筛选 支持一个页面多table
Vue+Element Ui实现el-table自定义表头下拉选择表头筛选
Yongqiang Chen的博客
01-11 5426
el-input size="small" placeholder="请输入关键字" v-model="cloumnKeyword" clearable>// 操作按钮组 === label: 文本，show：是否显示，icon：按钮图标，disabled：是否禁用，method：回调方法, 等等。defaultColumns: ["操作", "日期", "姓名", "地址"],totalColumns: ["操作", "日期", "姓名", "地址"],
el-table实现列筛选功能，控制列的显示和隐藏（实现简单，效果满分）
weixin_40252368的博客
04-24 1万+
el-tablet添加列筛选功能，控制列的显示和隐藏
el-table筛选方法使用
m0_59293086的博客
07-20 1885
单字段不需要使用some方法，多字段需要使用some方法。
el-table动态列筛选
学习记录
03-08 676
【代码】el-table动态列筛选。
Element-ui自定义表格头部-添加筛选条件
weixin_47342624的博客
01-19 1863
/ 自定义某列表头为时间搜索return h(props: {placeholder: '请选择排班时间',},on: {},},},// 自定义列表头展示信息return h('span',innerHTML: `值班人员(${type === 'day'?},},},// 表头日期选择},
el-table【合并行】+【筛选功能】+【配置列】+【点击跳转】功能
weixin_51317101的博客
11-23 1549
学习el-table【合并行】+【筛选功能】+【配置列】+【点击跳转】功能实现
vue实现前端列表多条件筛选
01-18
本文实例为大家分享了vue实现前端列表多条件筛选的具体代码，供大家参考，具体内容如下 1、先上图： 2、搜索条件绑定的数据是： filterForm:{ schoolName:'',//输入的学校名称 position:'',//选择的区域区域 schoolLevel:,//选择的学校办别 }, schoolList:[ {schoolName:'青岛市实验高级中学',schoolLevel:,position:'山东省青岛市城阳区硕阳路69号'}, {schoolName:'山东省青岛第二中学',schoolLevel:,position:'山东省青岛市崂山区松岭路
2024年前端最新通过cdn和vue，前端开发培训零基础
yjqdn82212的博客
05-07 180
为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Element-ui el-table自定义筛选table中数据
chy980723的博客
01-03 3948
<el-table :data="value.skuStockList.filter(f => f.deleteStatus !== 1)" border> ... </el-table>
VUE实现内容筛选
2301_77738160的博客
04-23 512
暂住地</th><th>姓名</th><th>性别查询：
基于vue的表格自定义表头搜索功能
陈慕一的博客
07-16 2233
工作中遇到了需要点击表格头展示本列数据,数据可搜索功能,所以把代码贴上来. 这里采用的是组件的方法: 父组件: // 父组件 HTML代码 <el-table-column> <template slot="header" slot-scope="scope"> <u-select table-title="表格名字" @btnTableHeader="btnTableHeader($event)"></u-select..
vue element-ui自定义表头，动态添加表头，新增行、新增列、删除行、删除列
热门推荐
ALSO666的博客
05-23 1万+
vue element-ui表格怎样自定义表头，动态添加表头，新增行、新增列、删除行、删除列需求描述1.自定义表头，表头里插入输入框2.默认初始化几行几列占位3.新增行4.新增列5.右键点击行，进行删除行6.右键点击表头，进行删除列7.效果展示8.所有代码总结 需求描述 根据项目需求，需要用户填写几行几列，表头自定义动态添加，用户可以手动新增行、新增列、删除行、删除列，怎么实现一起来看看吧~ 1.自定义表头，表头里插入输入框 <el-form ref="historyForm" :model="his
vue el-table 表头搜索（筛选）功能 头部添加搜索icon 点击重置按钮，重置对应字段的筛选条件（三）
dangsh_的博客
11-13 5307
如果在数据筛选时对原始数据进行操作，那么想重置该筛选条件的话，就需要重新获取数据（刷新页面） 不合理，需要实现重置某筛选条件的功能。 组件内部的重置按钮click方法 <el-button size="mini" @click="resetData">重置</el-button> 将组件input框中的数据清空， 组件改为隐藏， 修改icon颜色，触发父组件的resetChange方法 resetData () { console.log('reset')
vue + antd中Table自定义列查询筛选
weixin_43923202的博客
04-06 5690
html <a-table :columns="columns" :data-source="projectTable" bordered :pagination='false' size="middle" :scroll="{ x: '100%', y: 400 }" > <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, con
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、付费专栏及课程。

余额充值