Iview table and the corresponding drop-down box to display the contents of the query content

First, the code:

　　

 <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: ' All ' ,
         Val: ' 0 ' , 
      }, { 
        name: ' Normal ' ,
         Val: ' . 1 ' , 
      }, { 
        name: ' Disable ' ,
        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: [ ' all ' , ' normal ' , ' deactivation ' ], 
　　　　// ticketState: [ 'all', 'normal', 'deactivation'], corresponding to the above Val [ 0: all, 1: normal, 2: disable]

}; },

Second, the summary:

　　Val be the value of the interface and the corresponding values ​​of the background field (cardstate) as such can exhibit the fields to be queried.

Third, renderings: