select下拉框添加复选框功能

<template>

<el-select v-model="table.searchForm"

               multiple

               placeholder="请选择"

               @change="selectChang">

      <el-option v-for="item in bandSkuList"

                 :key="item.value"

                 :label="item.label"

                 :value="item.value">

        <span class="checkbox"></span>

        <span class="label-name-box"

              style="margin-left: 8px;">{{ item.label }}</span>

      </el-option>

    </el-select>

<template>

script

<script>

  export default {

    name: 'select-check',

    props: {

      bandSkuList: {

        type: Array,

        default: _ => []

      }

    },

    data() {

      return {

        table: {

          searchForm: ''

        },

      }

    },

  }

</script>

css样式

<style scoped>

  /*清空原来的多选框样式*/

  .el-select-dropdown.is-multiple .el-select-dropdown__item:after {

    content: "";

  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected:after {

    content: "";

  }

  /*参考el-checkbox实现checkbox样式*/

  .el-select-dropdown.is-multiple .el-select-dropdown__item .checkbox {

    display: inline-block;

    position: relative;

    border: 1px solid #dcdfe6;

    border-radius: 2px;

    box-sizing: border-box;

    width: 14px;

    height: 14px;

    background-color: #fff;

    z-index: 1;

    transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);

  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected .checkbox {

    background-color: #409eff;

    border-color: #409eff;

  }

  /*参考el-select多选对号样式实现checkbox中对号的样式*/

  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected .checkbox::after {

    position: absolute;

    top: -6px;

    font-family: element-icons;

    content: "\e6da";

    font-size: 12px;

    font-weight: 700;

    -webkit-font-smoothing: antialiased;

    color: #fff;

  }

  /*设置置灰内容样式*/

  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.is-disabled .checkbox {

    background-color: #f2f6fc;

    border-color: #dcdfe6;

  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.is-disabled .checkbox::after {

    color: #c0c4cc;

  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.is-disabled .label-name-box {

    color: #c0c4cc;

    font-weight: 400;

  }

  .el-select-dropdown__item {

    display: flex;

    align-items: center;

  }

</style>