vue+element ui实现依据eL-select选中的状态条件获取到的数据展示表格

<template>

　　<div>

　　　　<el-select  v-model="stateSelect" clearable size="small" placeholder="状态"               

　　　　　　  class="filter-item" style="width: 90px;margin-top:6px" @change="remoteMethod" filterable>

          　　 　　<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />

　　　　　</el-select>

　　　　

　　　　<el-table ref="table" :data="dataLists" size="small" style="width: 100%;"  v-show="tableHide">

          　　　　<el-table-column prop="orderNo" label="申请单号" />

         　　 　　<el-table-column prop="msg" label="申请理由" />　　

          　　　　<el-table-column prop="processState" label="状态">

            　　　　　　<template slot-scope="scope">

            　　　　　　　　{{toState(scope.row.processState)}}

           　　　　　　 </template>

          　　　　</el-table-column>

          　　　　<el-table-column prop="starterWorkNo" label="申请人" />

          　　　　<el-table-column prop="processStartTime" label="申请时间">

            　　　　<template slot-scope="scope">

　　　　　　　　　　//过滤器中的时间戳转换

            　　　　　　  <span>{{ scope.row.processStartTime |  formatDate}}</span>

            　　　　　</template>

         　　 　　</el-table-column>

      　　  </el-table>

　　</div>

</template>

<script>

export default {

　　data(){

　　　　return{

 　　　　　　enabledTypeOptions: [

             　　　　 { key: '0', display_name: '草稿' },

            　　　　  { key: '1', display_name: '流程中' },

             　　　　 { key: '2', display_name:'流程结束'},

             　　　　 { key: '3', display_name:'流程终止'}

          　　　　  ],

　　　　　　dataLists:[],

　　　　　}

　　},

　　methods:{

　　　　//依据状态搜索

　　　　remoteMethod(){

　　　　　　const stateSelect = this.stateSelect

　　　　　　if(stateSelect==0){

　　　　　　　//　请求接口，入参改成对应的状态

　　　　　　　　}else if(stateSelect==1){

　　　　　　　//　请求接口，入参改成对应的状态

　　　　　　}

　　　　},

　　},

}

</script>