element-ui 选择器自定义option

element-ui 选择器自定义option

多选时当option 禁用是会出现禁用icon， 当option选中是会出现打勾icon。

html:

<el-select v-model="value" multiple placeholder="请选择" @change="selectChange">
    <el-option
        v-for="item in dataList"
        :key="item.id"
        :label="item.name"
        :value="item.value"
        :disabled='item.disabled'>
        <span style="float:left">{{item.name}}</span>//选择label
        <span style="float:right" v-if="item.disabled"><i class="el-icon-remove-outline" style="color:#C6C6C6;fontSize:16px"></i></span>
        <span style="float:right" v-if="item.checked"><i class="el-icon-checked" style="color:#DA3A16;fontSize:16px"></i></span>
     </el-option>
 </el-select>

javascript:

let dataList = [
	{
		id:'1',
		name:'value',
		value:'value',
		checked:false,
		disabled:false,
	},
	{
		id:'2',
		name:'value2',
		value:'value2',
		checked:false,
		disabled:true,//当disabled为true时就会出现禁用icon
	},
]

//选中后出现打勾icon
selectChange(){
	this.dataList.forEach(item=>{
		item.checked = false;
		this.value.forEach(i=>{
			if(item.value == i){
				item.checked = true;
			}
		})
	}) 
}