el-select自定义样式,css手写选择框
<template>
<div>
<el-form ref="formRef" :model="form" label-width="140px">
<el-row class="mt-2">
<el-col :span="16">
<el-form-item label="label">
<!-- 自定义模板 start -->
<el-select v-model="value" multiple placeholder="请选择" style="width:100%;" class="select-box">
<el-option v-for="(item,index) in cities" :key="item.value" :label="item.label" :value="item.value">
<div class="row-box flex align-center">
<span class="width-10 border-right">{{ index+1 }}</span>
<span class="width-30 border-right">{{ item.code}}</span>
<span class="width-30 border-right">{{ item.label }}</span>
<span class="width-30">{{ item.value }}</span>
</div>
</el-option>
</el-select>
<!-- 自定义模板 end -->
</el-form-item>
</el-col>
</el-row>
<el-row class="mt-2">
<el-col :span="16">
<el-form-item label="label" class="form-item-box">
<div class="flex align-center justify-between input-out-box">
<div class="input-box flex align-center flex-1">
<div class="flex align-center flex-wrap" v-if="list.length > 0">
<div class="input-row flex align-center" v-for="(item, index) in list" :key="index">
<div class="mr-4">{{ item.processName }}</div>
<i class="el-icon-error" @click="delClick(index)"></i>
</div>
</div>
<div class="ml-14" v-else>请选择</div>
</div>
<div class="search-btn-box"><i class="el-icon-search" style="font-size: 16px;"></i></div>
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
cities: [{
code: 'A01',
value: 'code-1',
label: '北京'
}, {
code: 'A82',
value: 'code-2',
label: '上海'
}, {
code: 'S0',
value: 'code-3',
label: '南京'
}, {
code: 'N6',
value: 'code-4',
label: '成都'
}, {
code: 'B0',
value: 'code-5',
label: '深圳'
}, {
code: 'S6',
value: 'code-6',
label: '广州'
}],
value: '',
form: {
name: null,
},
list: [
{ processName: '文字1' },
{ processName: '文字2' },
{ processName: '文字3' },
{ processName: '文字4' },
{ processName: '文字5' },
{ processName: '文字6' },
{ processName: '文字7' },
{ processName: '文字8' },
{ processName: '文字9' },
{ processName: '文字10' },
{ processName: '文字11' },
{ processName: '文字12' },
{ processName: '文字13' },
{ processName: '文字14' },
{ processName: '文字15' },
{ processName: '文字16' },
{ processName: '文字17' },
{ processName: '文字18' },
{ processName: '文字19' },
{ processName: '文字20' },
],
}
},
mounted() {},
methods: {
delClick(index) {
this.list.splice(index, 1);
},
},
}
</script>
<style scoped>
div {
margin: 0;
padding: 0;
}
::v-deep .select-box .el-select-dropdown__item{
padding-right:0 !important;
}
::v-deep .el-form-item__content{
line-height: 30px !important;
}
.ml-14{
margin-left: 14px;
}
.mr-4{
margin-right: 4px;
}
.row-box{
width:100%;
border: 1px solid #eee;
}
.border-right{
border-right: 1px solid #eee;
}
.width-10{
width:10%;
text-align: center;
}
.width-30{
width:30%;
text-align: center;
}
.mt-2 {
margin-top: 20px;
}
.input-out-box {
border: 1px solid #DCDFE6;
border-radius: 4px;
width: 100%;
font-size: 12px;
color: #c0c0c0;
}
.input-box {
height: 100%;
border-right: 1px solid #DCDFE6;
}
.input-row {
background-color: #f4f4f5;
color: #909399;
border: 1px solid #e9e9eb;
height: 18px;
line-height: 18px;
text-align: center;
padding: 0 4px;
border-radius: 4px;
margin: 2px 0 2px 6px;
}
.search-btn-box {
padding: 0 14px;
border-radius: 0 4px 4px 0;
}
.flex {
display: flex;
}
.align-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.flex-1 {
flex: 1;
}
.flex-wrap {
flex-wrap: wrap;
}
</style>