Element-ui select 组件自定义选择内容

下拉自定义选择模板数据-常规形式

<template>
  <el-form-item label="申请人" prop="operators">
    <el-select
      v-model="params.operators"
      placeholder="请选择"
      style="width: 100%"
      multiple
      value-key="umNo"
      filterable
      collapse-tags
      @remove-tag="e => (e.check = false)">
      <el-option
        v-for="(item, index) in applyPeopleList"
        :key="index"
        :label="`${item.name}(${item.umNo})`"
        :value="item">
        <div style="display: flex; align-items: center" @click.stop>
          <el-checkbox v-model="item.check" @change="checkChange(item)">
            {{ item.name }} {{ item.umNo }}{{ item.roleName ? '' + item.roleName : '' }} {{ item.orgName }}
          </el-checkbox>
        </div>
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script>
  import { authorityService } from '@/services'

  export default {
    data() {
      this.applyPeopleList = [] // 人员信息列表
      return {
        operators: [], // 人员信息
      }
    },
    methods: {
      /**
       * @description 获取申请人列表
       */
      async getApplyPeople() {
        const { code, data } = await authorityService.queryUserAndOrgListByRoleCode()
        const { userName } = getUser()
        this.params.operators = [userName]
        if (code === '000000') this.applyPeopleList = data
      },
      /**
       * @description 选择申请人处理
       */
      checkChange() {
        const checkUmNo = []
        this.applyPeopleList.forEach(e => {
          if (e.check) checkUmNo.push(e)
        })
        this.params.operators = checkUmNo
      },
    },
  }
</script>

下拉自定义选择模板数据-表格形式

<template>
  <section class="dashboard-container">
    <div class="group-item">
      <p class="select-value">选中的值：{{ wechatValue }}</p>
      <el-select v-model="wechatValue" placeholder="请选择" :popper-append-to-body="false">
        <li>
          <div class="select-wechat-item-header">
            <p>群名称</p>
            <p>群主</p>
            <p>群人数</p>
          </div>
        </li>
        <el-option v-for="item of selectData" :key="item.id" :label="item.name" :value="item.id">
          <div class="select-wechat-item">
            <p>{{ item.name }}</p>
            <p>{{ item.leader }}</p>
            <p>{{ item.count }}</p>
          </div>
        </el-option>
      </el-select>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      wechatValue: 2,
      selectData: [
        { id: 1, name: '杭州互动法律咨询', leader: '秀哥秀 / U372479328942', count: 20 },
        { id: 2, name: '成都二嘛商标注册', leader: '秀哥秀 / U372479328942', count: 3 },
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  min-height: calc(100vh - 80px);
  @include g-content();
  .group-item {
    margin-top: 40px;
  }
  .select-wechat-item-header {
    display: flex;
    width: 100%;
    height: 32px;
    padding: 0 12px;
    align-items: center;
    font-size: 12px;
    p {
      flex: 1;
      color: #8c8c8c;
    }
  }
  .select-wechat-item {
    display: flex;
    width: 600px;
    p {
      flex: 1;
      color: #262626;
    }
  }
  .select-value {
    margin-bottom: 20px;
  }
}

::v-deep .el-select-dropdown .el-select-dropdown__item.selected p {
  color: #4974f5;
}
</style>