element table 添加自定义filter

samscat

已于 2024-01-05 12:17:05 修改

阅读量1.2k

点赞数 10

文章标签： ui javascript 前端

于 2024-01-05 12:16:20 首次发布

本文链接：https://blog.csdn.net/samscat/article/details/135406452

版权

文章讲述了在使用Vue.js的el-table组件中，如何实现状态列（AiWeixinConfigs列）的过滤功能，包括设置过滤选项和根据用户选择更新数据列表的过程，强调了column-key属性的配置。

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

 <el-table
      :data="tableData"
      ref="shopTable"
      v-loading="loading"
      @selection-change="handleSelectionChange"
      @filter-change="changeFilter"
    >
     <el-table-column
        label="状态"
        width="100px"
        prop="AiWeixinConfigs"
        column-key="AiWeixinConfigs"
        :filters="[
          { text: '继续绑定', value: 1 },
          { text: '立即绑定', value: 0 },
        ]"
        filter-multiple
      >
        <template #default="{ row }">
          <el-button class="el-button-bind" type="text" @click="goBind(row)">{{
            row.AiWeixinConfigs ? "继续绑定" : "立即绑定"
          }}</el-button>
        </template>
      </el-table-column>
      ...

changeFilter(val) {
      let columnKey = Object.keys(val)[0];
      if (columnKey == "AiWeixinConfigs") {
        // 更新过滤状态值
        this.BindingStatus = val[columnKey];
        // 获取table刷新
        this.getDataList();
      }
      
    },