vue3 层级选择器 el-cascader展示 更多的信息

cascader 正常情况下可以满足我们所需，一般展示的就是 {label:‘’ ；value:‘’} 但有时候需要展示更多的信息工用户查看，如下图。此时就需要我们进行一定的改造。

代码如下：

  <el-form-item label="相关人员">
    <el-cascader
      v-model="assistantList"
      :options="xgList"
      :props="props2"
      clearable
      filterable
      collapse-tags
      collapse-tags-tooltip
      @change="changeList" // 当绑定值变化时触发的事件
      @visible-change="getCustomerList"  //下拉框出现/隐藏时触发 接口调用
      class="cascaderInput"
      popper-class="man-cascader"
    >
    // 利用 插槽 去增加暂时内容，然后进行排版布局--排版布局需要自己去根据需求做，我这里也是简单的做了排版
      <template #default="{ node, data }">
        <div class="defaultData">
          <p class="defaultp1"> {{ data.label }} </p>
          <p class="defaultp2">
            {{ data.department }} /   {{ data.post || '--'}}
            <span class="defaultSpan">
              {{ data.phone || '--' }}
            </span>
          </p>
        </div>
      </template>
    </el-cascader>
  </el-form-item>

// 支持单选
const props1 = {
  checkStrictly: true,
  label: 'label', value: 'value', emitPath: false
}
// 支持多选
const props2 = {
  multiple: true,
  checkStrictly: true,
  label: 'label', value: 'value', emitPath: false
}
const xgList = ref([])
let assistantList: any = ref(null) // 相关人员列表

// 改变选择值的数据处理，这里是多选
const changeList = (val: any) =>{
  searchParams.value.relevantPersonnelList = val.join(',')  // 后端接收参数为字符串 ，需要前端处理
  emit('initBack') // 推送事件触发查询
}

const getCustomerList = (f: any) => {
  if (f) geOrgUserTree({
    orgId: 710,
    userId: useHomeState.userInfo.userId
  })
    .then(async (res: any) => {
      const { data, success, code } = res
      if (success && data) {
        let arr: any = []
        await arr_fn(data, arr) //数据重构
        xgList.value = [...arr]  
      }
    })
    .catch((err) => {
      ElMessage.error(err.message)
    })
}
const arr_fn = (data: any, arr: any) => {
  data.forEach((val: any) => {
    if (val.userDtoList) {
      val.userDtoList.forEach((v: any) => {
        if (v.status === 1) { // 接口返回数据后，前端处理 被启用的值
          arr.push({
            orgId: val.orgId,
            orgCode: val.orgCode,
            orgName: val.orgName,
            status: v.status,
            department: val.orgName,
            name: v.userName,
            personId: v.userId,
            phone: v.userTel,
            isShow: true,
            check: false,
            label: v.userName,
            value: v.userId
          })
        }
      })
    }
    if (val.children) {
      return arr_fn(val.children, arr)
    }
  })
}

css 样式 可自己处理

:deep(.cascaderInput){
  width: 212px;
  .el-cascader__tags{
    height: 24px !important;
  }
  .el-cascader {
    height: 24px;
    .el-input__wrapper {
      height: 24px;
      .el-input__inner{
        height: 24px;
      }
      input::placeholder {
        color: #262626;
        height: 24px !important;
      }
    }
    .el-cascader__tags{
      height: 24px !important;
    }
  }
}
.defaultData{
  width: 160px;
  height: 70px;
  margin-top: 10px;
  .defaultp1{
    width: 100%;
    margin-top: 25px;
  }
  .defaultp2{
    width: 100%;
    height: 30px; 
    margin-top: -18px;
    overflow: hidden;
    word-break: break-word;
    font-size: 12px;
    color: #cfcfcf;
    .defaultSpan{
      color:#333333;
    }
  }
}
.man-cascader {
  .el-cascader-menu__wrap.el-scrollbar__wrap{
    height: 100%;
    // margin-top: 15px;
  }
}