使用vue2+element+vue-admin-template创建单页应用小记-5.添加table筛选

1. html部分 红色部分为使用筛选的必填项，蓝色部分参数及方法名称根据场景自定义

<el-table :data="list" v-loading="listLoading" element-loading-text="Loading" border fit highlight-current-row @filter-change="filterChange">

  <el-table-column class-name="status-col" align="center" :label="$t('apiManager.apiType')" prop="apiType" column-key="apiType" :filters="{ text: '选项一', value: '1' },{ text: '选项二', value: '2' },{ text: '选项三', value: '3' }">
        <template slot-scope="scope">
          {{scope.row.apiType}}
        </template>
      </el-table-column>

</el-table>

 

js部分 

 filterChange(filters) {

//筛选条件变化后的处理函数

    console.log(filters);
    }