技術標籤：Vuevuehtmljswebcss

1、當placeholder過長時

1、樣式

2、程式碼

	<el-select remote filterable clearable placeholder="請輸入釋出單元英文名(支援模糊搜尋)" :remote-method="remoteMethod">
		<el-option v-for="v in items" :key="v.id" :value="v.id" :label="v.name"
 
 />
	</el-select>

2、網上其他人的解決方案

1、設定style="width:100%"與父盒子同寬，改變父盒子的寬度即可

	<el-select v-model="value5" multiple placeholder="請輸入釋出單元英文名(支援模糊搜尋)" style="width:100%">
		<el-option v-for="v in items" :key="v.id" :value="v.id"
 
 :label="v.name" />
	</el-select>

2、不適用原因

因為一般el-select都是放在表單內使用，所以大部分程式碼都是用el-form-item包裹的，而我這裡使用的是一個搜尋框，外面需要用div包裹。

3、解決方案

1、程式碼部分

	<div class="unitSearch">
		<el-select style="display: block; width: 100%;" remote filterable clearable placeholder="請輸入釋出單元英文名(支援模糊搜尋)"
 
 :remote-method="remoteMethod">
			<el-option v-for="v in items" :key="v.id" :value="v.id" :label="v.name" />
		</el-select>
	</div>

.unitSearch{
    display: inline-block;
    margin-right: -5px;
    .el-input{
      width:300px !important;
    }
    .el-input__inner{
      width:300px !important;
    }
    .el-input--suffix .el-input__inner{
      width:300px !important;
    }
    .el-input__icon{
      height:100%;
    }
}

2、div設定類名，然後修改css樣式

注意：
1、el-select要加上樣式style="display: block; width: 100%;"；
2、如果style加了scoped可能會導致樣式不生效，在.unitSearch前加上/deep/即可。