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>
