313 Star 3K Fork 546

Layui Vue / layui-vue

 / 详情

下拉树TreeSelect选择数据时,会将选择框给撑大

待办的
创建于  
2023-10-23 10:31

议题条件

  • 我确认已查阅:http://layui-vue.com ,但没有找到相关解决方案。
  • 我确认已在 Issues 中搜索过类似的问题,但没有找到相关解决方案。

版本号

2.10.1

浏览器

Google Chrome 117.0.5938.152

问题类型

疑是 BUG

问题描述

下拉树TreeSelect选择数据时,会将选择框给撑大,能不能将选中的标签宽度给固定,超出进行文字隐藏,鼠标移上去显示具体信息,这样排列起来就会很整齐。

业务代码

<template>
  <lay-tree-select style="" multiple @change="test" v-model="value2" :data="data2"  ></lay-tree-select>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value2 = ref([23, 5555])

const data2 = ref([
  {
    title: '一级1',
    id: 1,
    field: 'name1',
    checked: true,
    spread: true,
    children: [
      {
        title: '二级1-1 可允许跳转',
        id: 3,
        field: 'name11',
        href: 'https://www.layui.com/',
        children: [
          {
            title: '三级1-1-3',
            id: 23,
            field: '',
            children: [
              {
                title: '四级1-1-3-1',
                id: 24,
                field: '',
                children: [
                  {
                    title: '五级1-1-3-1-1',
                    id: 30,
                    field: '',
                  },
                  {
                    title: '五级1-1-3-1-2',
                    id: 31,
                    field: '',
                  },
                ],
              },
            ],
          },
          {
            title: '三级1-1-1',
            id: 7,
            field: '',
            children: [
              {
                title: '四级1-1-1-1 可允许跳转',
                id: 15,
                field: '',
                href: 'https://www.layui.com/doc/',
              },
            ],
          },
          {
            title: '三级1-1-2',
            id: 8,
            field: '',
            children: [
              {
                title: '四级1-1-2-1',
                id: 32,
                field: '',
              },
            ],
          },
        ],
      },
      {
        title: '二级1-2',
        id: 4,
        spread: true,
        children: [
          {
            title: '三级1-2-1',
            id: 9,
            field: '',
            disabled: true,
          },
          {
            title: '三级1-2-2',
            id: 10,
            field: '',
          },
        ],
      },
      {
        title: '二级1-3',
        id: 20,
        field: '',
        children: [
          {
            title: '三级1-3-1',
            id: 21,
            field: '',
          },
          {
            title: '三级1-3-2',
            id: 22,
            field: '',
          },
        ],
      },
    ],
  },
  {
    title: '一级2',
    id: 2,
    field: '',
    spread: true,
    children: [
      {
        title: '二级2-1',
        id: 5,
        field: '',
        spread: true,
        children: [
          {
            title: '三级2-1-1',
            id: 11,
            field: '',
          },
          {
            title: '三级2-1-2',
            id: 12,
            field: '',
          },
        ],
      },
      {
        title: '二级2-2',
        id: 6,
        field: '',
        children: [
          {
            title: '三级2-2-1',
            id: 13,
            field: '',
          },
          {
            title: '三级2-2-2',
            id: 14,
            field: '',
            disabled: true,
          },
        ],
      },
    ],
  },
  {
    title: '一级3',
    id: 16,
    field: '',
    children: [
      {
        title: '二级3-1',
        id: 17,
        field: '',
        fixed: true,
        children: [
          {
            title: '三级3-1-1',
            id: 18,
            field: '',
          },
          {
            title: '三级3-1-2',
            id: 19,
            field: '',
          },
        ],
      },
      {
        title: '二级3-2',
        id: 27,
        field: '',
        children: [
          {
            title: '三级3-2-1',
            id: 28,
            field: '',
          },
          {
            title: '三级3-2-2',
            id: 29,
            field: '',
          },
        ],
      },
    ],
  },
])
 function test(val){
    console.log(val);
  }

</script>

截图补充

输入图片说明输入图片说明

演示地址

友好承诺

  • 我承诺将本着相互尊重、理解和友善的态度进行交流,维护 layui-vue 良好的社区氛围。

评论 (1)

layui.zhang 创建了任务

输入图片说明
点击删除,不会触发change事件

登录 后才可以发表评论

状态
负责人
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
参与者(1)
TypeScript
1
https://gitee.com/layui-vue/layui-vue.git
git@gitee.com:layui-vue/layui-vue.git
layui-vue
layui-vue
layui-vue

搜索帮助