解決iview下拉框Select多選因爲內容太多致使的換行

iview使用下拉框的時候，發現當內容太多就會致使iview的下拉框換行，嚴重影響到了用戶體驗，以下圖：javascript

經過查看iview的官網的API,確實沒有發現一個好的解決方案，官網有提供一個max-tag-count屬性，這個屬性是輸入框中的選項卡數量超過該屬性值，那麼就隱藏後邊的選項卡。css

理想實際效果：html

理想很豐滿，現實很骨感，因爲選項卡的內容的長度是不肯定的，結果多是這樣：前端

無奈之下，只能本身動手改了。vue

方案一：強制要求不許換行，防止換行致使樣式變化（簡單粗暴的方法）java

實際效果：jquery

這樣一來，的確是解決換行的問題了，可是拿着成果給老大看，直接打回來了（好苛刻！！），緣由是有一個致命的缺陷，沒有辦法左右拖動，用戶能看到的只有輸入框中的那幾個，其餘的都隱藏了。後端

方案一代碼：（其實就是CSS加了一行代碼）app

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>iview example</title>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
    <style> .ivu-select-multiple .ivu-select-selection div{overflow: hidden;white-space: nowrap;}
    </style>
</head>
<body>
<div id="app" style="margin-left: 300px;margin-top: 300px;">
    <template>
        <i-select v-model="model10" multiple style="width:260px">
            <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
        </i-select>
    </template>
</div>
<script>
    new Vue({ el: '#app', data: { cityList: [ { value: 'New York', label: 'New York' }, { value: 'London', label: 'London' }, { value: 'Sydney', label: 'Sydney' }, { value: 'Ottawa', label: 'Ottawa' }, { value: 'Paris', label: 'Paris' }, { value: 'Canberra', label: 'Canberra' } ], model10: [] }, methods: { } }) </script>
</body>
</html>

方案二：放棄Iview的選項卡的作法，本身來實現一個下拉多選（較爲複雜的方案）iview

實際效果：

框裏邊的內容是能夠左右拖動的。實現原理是：將Iview自帶的相關標籤所有隱藏掉，而後本身往標籤體添加一個input輸入框，利用它裏邊的內容能夠自由左右拖動的特性。

方案二代碼：（代碼是能夠直接運行的，我主要作後端，前端代碼寫的比較爛。。。。）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>iview example</title>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
    <style>
        /*隱藏掉iview的標籤*/ .ivu-select-multiple .ivu-select-selection div {overflow: hidden;white-space: nowrap;height: 32px;} .ivu-select-multiple .ivu-select-selection .ivu-tag-checked{display: none;} .ivu-select-multiple .ivu-select-selection .ivu-select-placeholder{display: none;}
 input:focus{outline: none;} /*禁止輸入框input高亮顯示*/

</style>
</head>
<body>
<div id="app" style="margin-left: 300px;margin-top: 300px;">
    <template>
        <i-select v-model="model10" multiple style="width:260px" @on-change="chg" transfer-class-name="mytest">
            <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
        </i-select>
    </template>
</div>
<script> window.vm =new Vue({ el: '#app', data: { cityList: [ { value: 'New YorkVal', label: '紐約' }, { value: 'LondonVal', label: '倫敦' }, { value: 'SydneyVal', label: '悉尼' }, { value: 'OttawaVal', label: '渥太華' }, { value: 'ParisVal', label: '巴黎' }, { value: 'CanberraVal', label: '堪培拉' } ], model10: [] }, methods: { chg : function(){ this.$nextTick(function(){ /*從被隱藏掉的Iview標籤中,把須要顯示的內容取出來,放到自定義的輸入框中*/
                    var text=""; /*.mytest是我設置的彈出層的class名稱transfer-class-name="mytest"*/
                    /*經過實際的彈出層名稱，經過jquery來一層一層地找到須要顯示的內容*/
                    var div = $(".mytest").prev().children('div'); $(div).find(".ivu-tag-text").each(function(){ text += $(this).html()+"、"; }) text = text.substring(0,text.length-1); $(div).children('input').val(text); }) } } }) /*頁面加載的時候,自定義一個Input輸入框,用來替換Iview進行顯示*/ $(".ivu-select-multiple .ivu-select-selection>div").each(function () { /*設置輸入框的寬和高*/
    var width = $(this).width()-10; var height = $(this).height(); /*獲取默認顯示的內容*/
    var phr = $(this).find('span').text(); if(phr !== null || phr !== undefined || phr !== ''){ phr = "請選擇"; } /*將自定義的輸入框放到iview標籤體中*/ $(this).prepend("<input style='border:0px;box-shadow:none;width: "+width+"px;height: "+height+"px' readonly placeholder='"+phr+"' />"); }) </script>
</body>
</html>