VUE element-ui之table表格表头下拉筛选功能

步骤：

在需要筛选的列中插槽法：

<el-table-column prop="mount" label="交易量区间" align="left">
          <!-- eslint-disable-next-line -->
          <template slot="header" slot-scope="scope">
            <el-dropdown trigger="click" size="medium " @command="handleCommand">
              <span style="color:#909399">
                {{ menuText }}<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(item, index) in section"
                  :key="index"
                  :command="item"
                >
                  {{ item }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>

data中定义下拉列表：

data() {
    return {
      menuText: '交易量区间',
      section: [
        '一万',
        '两万',
        '三万'
      ]
    }
}

在methods中定义筛选方法：

 // 表格筛选
    handleCommand(item) { //这里定义方法可在选取时触发
      this.menuText = item
    }

效果如图：