vue + elementui 实现 el-table 表格动态表头筛选功能

最新推荐文章于 2024-09-02 17:07:44 发布

后来就忘了

最新推荐文章于 2024-09-02 17:07:44 发布

阅读量1.6k

点赞数

分类专栏： vue 文章标签： vue css javascript

本文链接：https://blog.csdn.net/weixin_45016173/article/details/121659166

版权

vue 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

本文介绍了一段关于使用Element UI构建的数据表格，展示了如何实现字段级别的筛选功能，以及如何根据条件动态调整表头内容。通过`el-table`组件，实现了单选或多选筛选，针对不同字段（如资格状态、意向等级和电话状态）定制过滤选项。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<el-table ref="table" v-loading="listLoading"
                      :cell-style="cellStyle"
                      :data="tableData"
                      :header-cell-style="table_heard_style"
                      :row-class-name="tableRowClassName" :row-key="row_key"
                      :span-method="arraySpanMethod"
                      border
                      class="btns_siyou"
                      element-loading-text="拼命加载中"
                      highlight-current-row
                      size="mini"
                      style="width: 100%" @select="selectCheckOne" @select-all="selectAll"
                      @sort-change="sortChangeFn"
                      @filter-change="filterChange"
            >
              <el-table-column :resizable="false" type="selection" width="50"></el-table-column>
              <!--循环表头-->
              <template v-for="(item, index) in tableHead">
              //判断哪一列需要筛选功能
                <el-table-column v-if="item.field == 'qualificationStatus'" :key="index"
                                 :column-key="item.field"
                                 :filter-multiple="false"
                                 :filters="zzqkdata2" :label="item.fieldName" :min-width="minWidthFn(item)"
                                 :property="item.field"
                                 filter-placement="top-end"
                >
                  <template slot-scope="scope"></template>
                </el-table-column>
                //filter-multiple 是否多选
                //filters 筛选数组
                <el-table-column v-else-if="item.field == 'intentionLevel'" :key="index"
                                 :column-key="item.field"
                                 :filter-multiple="false"
                                 :filters="yixData2" :label="item.fieldName" :min-width="minWidthFn(item)"
                                 :property="item.field"
                                 filter-placement="top-end"
                >
                  <template slot-scope="scope"></template>
                </el-table-column>
                <el-table-column v-else-if="item.field == 'callStatus'" :key="index"
                                 :column-key="item.field"
                                 :filter-multiple="false"
                                 :filters="phoneTelData2" :label="item.fieldName" :min-width="minWidthFn(item)"
                                 :property="item.field"
                                 filter-placement="top-end"
                >
                  <template slot-scope="scope"></template>
                </el-table-column>
                //其他列
                <el-table-column v-else :key="index" :label="item.fieldName" :min-width="minWidthFn(item)"
                                 :property="item.field"
                                 :sortable="sortAbleFn(item)"
                >
                  <template slot-scope="scope">
                    <!--企业名称-->
                    <span v-if="item.fieldName === '企业名称'">...</span>
                    <!--联系方式-->
                    <span v-else-if="item.fieldName === '联系方式'">...</span>
                    <!--否则-->
                    <span v-else>{{ scope.row[scope.column.property] === "" ? "--" : scope.row[scope.column.property] }}</span>
                  </template>
                </el-table-column>

// table表头筛选条件触发事件
    filterChange(filters) {
      let data = JSON.parse(JSON.stringify(this.tableDatasList))
      let aaa = {text: '', value: ''}
      let $select = Object.keys(filters)[0]
      //代码待优化，，，哈哈哈哈哈
      if ($select == "qualificationStatus") {
        aaa = this.zzqkdata2.find(val => filters.qualificationStatus[0] == val.value)
        data.companyType = !this.isobjEmpty(aaa) ? aaa.value : ''
      } else if ($select == "intentionLevel") {
        aaa = this.yixData2.find(val => filters.intentionLevel[0] == val.value)
        data.followQueryInfo.intentionLevel = !this.isobjEmpty(aaa) ? aaa.value : ''
      } else if ($select == "callStatus") {
        aaa = this.phoneTelData2.find(val => filters.callStatus[0] == val.value)
        data.followQueryInfo.callStatus = !this.isobjEmpty(aaa) ? aaa.value : ''
      } else {
      }
      this.tableHead.forEach(val => {
        if (val.field == $select) {
          if (this.isobjEmpty(aaa)) {
            aaa = {text: '', value: ''}
            if ($select == "qualificationStatus") {
              aaa.text = '有无资质'
            } else if ($select == "intentionLevel") {
              aaa.text = '意向度'
            } else if ($select == "callStatus") {
              aaa.text = '电话状态'
            } else {
            }
          }
          val.fieldName = aaa.text
        }
      })
      this.pageNum = 0
      this.currentPage4 = 1
      this.tableDatasList = JSON.parse(JSON.stringify(data))
      this.getListTable(data)
    },