el-table использует расширение, чтобы развернуть всю строку и скрыть кнопку развертывания, когда данных нет.
el-table использует расширение, чтобы развернуть всю строку и скрыть кнопку развертывания, когда данных нет.

1. Кнопка развертывания не скрывает данные.

Когда содержимого строк слишком много и вы не хотите отображать горизонтальную полосу прокрутки

Или вы можете использовать функцию раскрытия строки таблицы при нажатии на строку, чтобы получить подмножество данных.

Однако один из недостатков типа = развернуть заключается в том, что при отсутствии данных подмножества также будет отображаться стрелка раскрытия и будет отображаться пробел, например

Язык кода:js
копировать
Чтобы изменить план, необходимо выполнить три шага:

// первый шаг добавлен тег el-table имя-класса-строки(строки className метод обратного вызова)
:row-class-name="iconHide"

// Шаг 2 Не отображать стрелку раскрывающегося списка, если подмножества нет.  hasChild — это тег решения, возвращаемый серверной частью. У квалифицированных гильдий будет еще один класс.
methonds:{
    iconHide({ row }) {
      console.log('row', row)
      if (!row.hasChild || row.hasChild === '0') {
        return 'icon-no'
      }
    }
  }
   
   
// Шаг 3 css Изменить стиль
::v-deep .icon-no .el-table__expand-icon {
  display: none;
}

2. Щелкните всю строку, чтобы развернуть ее.

Язык кода:js
копировать
//Добавляем метку в el-таблицу
row-key="id"
:expand-row-keys="expands" // Это свойство можно установить Table Текущую развернутую строку необходимо установить row-key можно использовать свойство, которое используется для расширения строк keys множество.
@row-click="clickRowHandle" // Это событие срабатывает при нажатии строки

// Определениеразворачивается
data(){
    expands:[]
}

// methods

methods: { 
      clickRowHandle(row, column, event) {
        if (this.expands.includes(row.id)) {
          this.expands = this.expands.filter((val) => val !== row.id)
        } else {
          // this.expands = []  Требование состоит в том, что одновременно можно расширить только одну строку. Этот комментарий можно открыть
          this.expands.push(row.id)
      }
    },
}
boy illustration
Учебное пособие по Jetpack Compose для начинающих, базовые элементы управления и макет
boy illustration
Код js веб-страницы, фон частицы, код спецэффектов
boy illustration
【новый! Суперподробное】Полное руководство по свойствам компонентов Figma.
boy illustration
🎉Обязательно к прочтению новичкам: полное руководство по написанию мини-программ WeChat с использованием программного обеспечения Cursor.
boy illustration
[Забавный проект Docker] VoceChat — еще одно приложение для мгновенного чата (IM)! Может быть встроен в любую веб-страницу!
boy illustration
Как реализовать переход по странице в HTML (html переходит на указанную страницу)
boy illustration
Как решить проблему зависания и низкой скорости при установке зависимостей с помощью npm. Существуют ли доступные источники npm, которые могут решить эту проблему?
boy illustration
Серия From Zero to Fun: Uni-App WeChat Payment Practice WeChat авторизует вход в систему и украшает страницу заказа, создает интерфейс заказа и инициирует запрос заказа
boy illustration
Серия uni-app: uni.navigateЧтобы передать скачок значения
boy illustration
Апплет WeChat настраивает верхнюю панель навигации и адаптируется к различным моделям.
boy illustration
JS-время конвертации
boy illustration
Обеспечьте бесперебойную работу ChromeDriver 125: советы по решению проблемы chromedriver.exe не найдены
boy illustration
Поле комментария, щелчок мышью, специальные эффекты, js-код
boy illustration
Объект массива перемещения объекта JS
boy illustration
Как открыть разрешение на позиционирование апплета WeChat_Как использовать WeChat для определения местонахождения друзей
boy illustration
Я даю вам два набора из 18 простых в использовании фонов холста Power BI, так что вам больше не придется возиться с цветами!
boy illustration
Получить текущее время в js_Как динамически отображать дату и время в js
boy illustration
Вам необходимо изучить сочетания клавиш vsCode для форматирования и организации кода, чтобы вам больше не приходилось настраивать формат вручную.
boy illustration
У ChatGPT большое обновление. Всего за 45 минут пресс-конференция показывает, что OpenAI сделал еще один шаг вперед.
boy illustration
Copilot облачной разработки — упрощение разработки
boy illustration
Микросборка xChatGPT с низким кодом, создание апплета чат-бота с искусственным интеллектом за пять шагов
boy illustration
CUDA Out of Memory: идеальное решение проблемы нехватки памяти CUDA
boy illustration
Анализ кластеризации отдельных ячеек, который должен освоить каждый&MarkerгенетическийВизуализация
boy illustration
vLLM: мощный инструмент для ускорения вывода ИИ
boy illustration
CodeGeeX: мощный инструмент генерации кода искусственного интеллекта, который можно использовать бесплатно в дополнение к второму пилоту.
boy illustration
Машинное обучение Реальный бой LightGBM + настройка параметров случайного поиска: точность 96,67%
boy illustration
Бесшовная интеграция, мгновенный интеллект [1]: платформа больших моделей Dify-LLM, интеграция без кодирования и встраивание в сторонние системы, более 42 тысяч звезд, чтобы стать свидетелями эксклюзивных интеллектуальных решений.
boy illustration
LM Studio для создания локальных больших моделей
boy illustration
Как определить количество слоев и нейронов скрытых слоев нейронной сети?
boy illustration
[Отслеживание целей] Подробное объяснение ByteTrack и детали кода