iview下拉框內容查詢的和表格對應的內容顯示

1、代碼：

　　

<span class="filterBlock"> 證卡狀態： <Select v-model="selectedCardStatus"
                class="filter">
          <Option v-for="item in cardStatus" :value="item.val" :key="item.val">{{ item.name }}</Option>
        </Select>
      </span>

 

data() { return { cardStatus: [{ name: '所有', val: '0', }, { name: '正常', val: '1', }, { name: '停用',  val: '2', }], selectedCardStatus: '', }; },

 

data() { return { tableColumn: [], payWayTable: [ { type: 'expand', width: 30, render: (h, params) => { return h(expandRow, { props: { row: params.row, }, }); }, }, { type: 'index', title: '序號', width: 80, align: 'center', }, { title: '證卡狀態', key: 'cardstate', width: 100, align: 'center', render: (h, params) => { return h('div', this.ticketState[params.row.cardstate]); }, }, ], ticketState: ['所有', '正常', '停用'],
　　　　//ticketState: ['所有', '正常', '停用'],對應上面的val[0:所有,1:正常,2:停用]

}; },

2、總結：

　　val中的值要和後臺接口字段（cardstate）對應的值同樣，這樣就能顯示出要查詢的字段。

3、效果圖：