el-tree-select 下拉选项超出换行

<el-tree-select
  ref="treeSelectRef"
  v-model="ruleForm.occuTypeKeys"
  :data="handleOccuOptions"
  :default-expanded-keys="defaultExpanded"
  placement="right-start"
  popper-class="setRangeTree"
  multiple
  clearable
  :render-after-expand="false"
  show-checkbox
  @clear="handleClear" />

<style lang="less">
.setRangeTree {
  .el-tree-select__popper {
    max-width: 500px;
    .el-select-dropdown__item span {
      white-space: normal !important;
      word-wrap: break-word !important;
    }
  }
  .el-tree-node__content {
    height: 100%;
  }
  .el-tree-select__popper .el-select-dropdown__item {
    height: 100% !important;
    min-height: 20px !important;
  }
}
</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以使用 `el-select` 和 `el-tree` 配合使用来实现树形结构下拉单选。 首先,需要将数据转换为 `el-tree` 的节点格式,例如以下数据: ```javascript const treeData = [ { id: 1, label: '节点1', children: [ { id: 2, label: '节点1-1' }, { id: 3, label: '节点1-2' } ] }, { id: 4, label: '节点2', children: [ { id: 5, label: '节点2-1' }, { id: 6, label: '节点2-2' } ] } ] ``` 需要转换为 `el-tree` 的节点格式: ```javascript const treeNodes = [ { id: 1, label: '节点1', children: [ { id: 2, label: '节点1-1', isLeaf: true }, { id: 3, label: '节点1-2', isLeaf: true } ] }, { id: 4, label: '节点2', children: [ { id: 5, label: '节点2-1', isLeaf: true }, { id: 6, label: '节点2-2', isLeaf: true } ] } ] ``` 其中,每个节点需要添加 `isLeaf` 属性,用于标记该节点是否为叶子节点。 接着,在 `el-select` 中使用 `el-tree` 作为下拉选项。代码示例: ```html <template> <el-select v-model="selectedItem" placeholder="请选择" clearable> <el-tree :data="treeNodes" :props="treeProps" :node-key="treeProps.id" :highlight-current="true" :default-expand-all="true" :expand-on-click-node="false" v-if="treeVisible"></el-tree> <el-option v-else v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </template> <script> export default { data() { return { selectedItem: null, treeNodes: [ { id: 1, label: '节点1', children: [ { id: 2, label: '节点1-1', isLeaf: true }, { id: 3, label: '节点1-2', isLeaf: true } ] }, { id: 4, label: '节点2', children: [ { id: 5, label: '节点2-1', isLeaf: true }, { id: 6, label: '节点2-2', isLeaf: true } ] } ], treeProps: { children: 'children', label: 'label', isLeaf: 'isLeaf' }, options: [ { label: '选项1', value: '1' }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' } ], treeVisible: false } }, watch: { selectedItem(val) { if (val && val.children && val.children.length > 0) { this.treeVisible = true } else { this.treeVisible = false } } } } </script> ``` 上述代码中,`el-select` 的下拉选项分为两部分:`el-tree` 和 `el-option`。根据当前选中的节点是否有子节点,判断显示 `el-tree` 还是 `el-option`。 在 `el-tree` 中,需要设置 `props` 属性,指定节点数据中的属性名,以及 `node-key` 属性,用于标识节点的唯一属性名。其他属性根据实际需求进行设置。 在 `watch` 中,根据当前选中的节点是否有子节点,控制 `el-tree` 的显示与隐藏。 注意:以上代码只实现了树形结构下拉单选的基本功能,还需要根据实际需求进行修改和完善。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值