Element-Ui:Select 选择器

Select 选择器

实现如下场景：我们点击选择之后，给选择的选项前面加一个打勾的图标

代码如下：

最终实现

// 需要在图标的元素里面设置样式：浮动，宽度，灵活利用margin；关于图标的span标签可以换为i
// html
<template>
<el-form-item label="职业">
<el-select v-model="chooseValue" placeholder="全部">
<el-option v-for="item in msgTypes" :key="item.value" :label="item.label" :value="item.value">
// 实现一：只给图标添加浮动，然后设定宽度大于或等于图标的宽度，利用margin灵活居中
<span
style="float: left;margin-top:10px; width:20px"
:class="chooseValue === item.value ? 'el-icon-check' : ''"
></span>
<span>{{ item.label }}</span>
// 实现二：给图标和文字都设置浮动，和宽度，让右边的文字宽度越宽就越靠近左边，调整图标和文字之间的距离
//<span
//style="float: left;margin-top:10px; width:20px"
//:class="chooseValue === item.value ? 'el-icon-check' : ''"
//></span>
//<span style="float: right; width:150px">{{ item.label }}</span>
// 实现三：给图标和文字都设置浮动，只给文字设置宽度，
//<span
//style="float: left;margin-top:10px;"
//:class="chooseValue === item.value ? 'el-icon-check' : ''"
//></span>
//<span style="float: right; width:150px">{{ item.label }}</span>
// 实现四：只给文字设置和宽度，
//<span
//style="margin-top:10px;"
//:class="chooseValue === item.value ? 'el-icon-check' : ''"
//></span>
//<span style="float: right; width:150px">{{ item.label }}</span>

</el-option>
</el-select>
</el-form-item>
</template>
// JS
<script>
export default {
  data() {
    return {
      chooseValue: "",
      msgTypes: [
        {
          value: "选项一",
          label: "全部"
        },
        {
          value: "选项二",
          label: "老师"
        },
        {
          value: "选项三",
          label: "学生"
        },
        {
          value: "选项四",
          label: "教导员"
        }
      ]
    };
  }
};
</script>