element ui table 单位格条件过滤后请求接口(filter-method、filter-change)

我家媳妇儿萌哒哒

已于 2023-04-19 17:02:15 修改

阅读量2.6k

点赞数

分类专栏： element UI 文章标签： vue.js elementui javascript

于 2023-04-19 16:57:41 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44146522/article/details/130247963

版权

element UI 专栏收录该内容

18 篇文章

订阅专栏

该文章介绍了如何在Vue.js应用中使用el-table组件进行数据展示，包括设置表格样式、处理条纹、固定列、自定义序号和过滤器。filterHandler函数用于过滤数据，而filterChanged监听筛选变化，适合作为触发更新数据源的时机。同时提醒，filterChanged内不应直接调用后端接口以防止无限循环。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-table
 class="tableBox" 
 ref="elTable" 
 :data="tableData" 
 v-loading="tableloading" 
 stripe 
 border
 row-key="conId" 
 @selection-change="handleSelectionChange"
 @filter-change="filterChanged"
 :header-cell-style="{ background: '#F5F7FA' }" style="font-size: 16px" 
 :row-style="{ height: '50px' }">
    <el-table-column type="selection" reserve-selection width="55" align="center">
    </el-table-column>
    <el-table-column label="序号" align="center" type="index" width="80" fixed>
       <template slot-scope="scope">
         <span>{{ (form.current - 1) * form.size + scope.$index + 1 }}</span>
       </template>
    </el-table-column>
    <el-table-column label="标题" show-overflow-tooltip min-width="400" column-key="title"
    :filters="[{ text: '默认', value: '默认' }, { text: '不推荐', value: '不推荐' }, { text: 
    '推荐', value: '推荐' }]" :filter-method="filterHandler" fixed>
          <template slot-scope="scope">
            <span class="hot">HOT</span>
          </template>
    </el-table-column>
  </el-table>

js部分：

 filterHandler(value, row, column){
   //const property = column['property'];
   return row.type === value;
 },
 filterChanged(value){
 //value是一个对象，其key值为通过在el-table-column中设置的column-key属性，标志哪一个列的过滤条 
 件，可用于区分哪一个列的筛选条件发生了改变。
 //filterChanged函数和filter-method属性一般而言使用一个，前者可自定义筛选条件，如需要重新查库，则 
 比较适用，filter-method为el-table-column的属性函数，
 //其绑定的函数内部逻辑为：遍历表格绑定的数据，匹配表格每一行是否满足筛选条件，然后返回，所以上述示 
 例中的filterTag、filterChanged函数其实会重复执行，不可在其内部调用后端接口，否则会发生调用死循环。
  console.log(value.title)  //   {title:['默认','不推荐','推荐']}
  //请求接口
  this.getlist()
 },