検索データのVUE +要素のドロップダウンリスト

1.セックスケーススタディ

性别:<el-select v-model="listQuery.xb" placeholder="性别" clearable class="filter-item ">
         <el-option v-for="item in xbTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
     </el-select>

const xbTypeOptions = [
    { key: '男', display_name: '男' },
    { key: '女', display_name: '女' }]

const xbTypeKeyValue = xbTypeOptions.reduce((acc, cur) => {
    acc[cur.key] = cur.display_name
    return acc
  }, {})

data(){  
return{
	listQuery: {
          page: 1,
          limit: 20,
          xb: undefined
        },
    xbTypeOptions,
    }
 }

4.filtersフィルタ

filters: {
      statusFilter (status) {
        const statusMap = {
          published: 'success',
          draft: 'info',
          deleted: 'danger'
        }
        return statusMap[status]
      },
      typeFilter (type) {
        return xbTypeKeyValue[type]
      },
    },