element：el-select加图片

最新推荐文章于 2023-09-01 13:33:50 发布

手把手入门

最新推荐文章于 2023-09-01 13:33:50 发布

阅读量877

点赞数

分类专栏： web前端文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_16946803/article/details/127083615

版权

web前端专栏收录该内容

37 篇文章 0 订阅

订阅专栏

<el-form-item label="力量" prop="partEnhance">
            <el-select v-model="form.partEnhance" filterable placeholder="请选择" multiple ><!-- clearable collapse-tags -->
              <el-option
                v-for="item in muscleInfoList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                <div style="display:flex;align-items: center;">
                  <el-image
                    style="width:30px;height:30px;margin-right:20px;border-radius: 100px;"
                    :src="item.thumbnailImg"
                    fit="fill"></el-image>
                  <div>{{ item.name }}</div>
                </div>
              </el-option>
            </el-select>
          </el-form-item>

加强版

<div class="selectCheckbox">
		<el-select v-model="value" placeholder="请输入" multiple>
			<el-checkbox-group v-model="checkList" @change="checkboxClick">
				<el-option :label="item.label" :value="item.value" v-for="item in options" :key="item.value">
					<div style="display:flex;align-items: center;">
						<div @click.stop>
							<el-checkbox :label="item.value" style="display:flex;align-items: center;">
								<img src="../../assets/image/3.jpg" style="width:30px;height:30px;margin-right:20px;border-radius: 100px;" />
								<div>{{ item.label }}</div>
							</el-checkbox>
						</div>
					</div>
				</el-option>
			</el-checkbox-group>
		</el-select>
	</div>