当前位置:   article > 正文

el-select与el-option插槽样式自定义_el-select 插槽

el-select 插槽

需求:

 

代码:

  1. <el-select v-model="ruleForm.ShowState" class="selsectbox">
  2. <template #prefix>
  3. <div class="pl-10px">轮播状态:</div>
  4. </template>
  5. <el-option
  6. v-for="item in showStateOptions"
  7. :key="item.value"
  8. :label="item.label"
  9. :value="item.value"
  10. >
  11. <template #default>
  12. <StatusTag
  13. :type="showStateConfigs[item.value].type"
  14. :txt="showStateConfigs[item.value].txt"
  15. />
  16. </template>
  17. </el-option>
  18. </el-select>
  1. <script setup lang="ts">
  2. const showStateOptions = [
  3. { value: 1, label: "启用" },
  4. { value: 2, label: "禁用" }
  5. ];
  6. </script>
  1. <style scoped lang="scss">
  2. .selsectbox {
  3. width: 230px;
  4. ::v-deep .el-input__inner {
  5. padding-left: 70px;
  6. }
  7. }
  8. </style>
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/107224
推荐阅读