el-tabs tab 크기 조정하기

---

el tabs 를 사용하는데 tab 은 다섯개인데 두 개 밖에 안보이는 것이다.

알고보니 상위 컴포넌트의 스타일에 영향을 받고 있었다.

 

아래 코드가 핵심이지만 또 쓸 수 있으니 전체 코드 기록 하기 : )

::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  width  : 20% !important; 
  text-align: left;
  border: 1px solid red;
}

---

<template>
    <div class = "grid-content" >
    <el-tabs v-model = "activeName" type = "border-card">
      <el-tab-pane
        v-for  = "item in tabMapOptions"
        :key   = "item.key"
        :name  = "item.key"
        :label = "item.label"
      >
        <allTab
          v-if   = "item.key === 'all' && item.key === ''"
        />
        <classifyTab
          v-if       = "item.key === 'classify'"
        />
        <relationTab
          v-if      = "item.key === 'relation'"
        />
        <sentimentTab
          v-if      = "item.key === 'sentiment'"
        />
        <spamTab
          v-if      = "item.key === 'spam'"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

import allTab from './components/all/index'
import classifyTab from './components/classify/index'
import relationTab from './components/relation/index'
import sentimentTab from './components/sentiment/index'
import spamTab from './components/spam/index'

export default {
    name : 'Lucy_Pattern_Dictionary_All_Search'

    , components: { 
        allTab
        , classifyTab
        , relationTab
        , sentimentTab 
        , spamTab 
    }
    
    , props : {
        searchOptionRefresh : {
            type : Boolean
            , default : false
        }
        , searchOption : {
            type : Object
            , default : function () {
                return {    
                    searchWord : ''
                    , searchOptionValue1 : '0'
                    , searchOptionValue2 : '0'
                }
            }
        }
    }

    , data() {
      return {
        activeName      : 'all'
        , tabMapOptions : [
            {
                label: '전체'
                , key: 'all'
            }
            , {
                label: '분류분석'
                , key: 'classify'
            }
            , {
                label: '연관어 분석'
                , key: 'relation'
            }
            , {
                label: '감성 분석'
                , key: 'sentiment'
            }
            , {
                label: '스팸 분석'
                , key: 'spam'
            }
        ]
      }
    }

    , methods : {
        handleClick (){

        }
    } 
}
</script>


<style scoped lang="scss">
::v-deep .el-tabs__nav {
  width: 100%;
}

::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  width  : 20% !important; 
  text-align: left;
  border: 1px solid red;
}
.grid-content {
  padding: 10px;
}
 </style>

 

---