vue. js таблица не прокручивается - PullRequest
Новая
       25

vue. js таблица не прокручивается

1 голос
/ 22 апреля 2020

это моя страница ввода, и я использую таблицу для продуктов, но таблица неорганизована в моем дизайне. это должно прокрутить это моя вторая попытка добавить что-то здесь, но я не могу постоянно добавлять что-то здесь, это край невозможности. Всегда есть некоторые ошибки на этот раз мои коды слишком много из текста = / ughhh 

new Vue({
el:"#app",
data:{
    users:[
      {
        "id": 1,
        "name": "Leanne Graham",
        "username": "Bret",
        "email": "Sincere@april.biz",
        "website": "hildegard.org",
      },
      {
        "id": 2,
        "name": "Ervin Howell",
        "username": "Antonette",
        "email": "Shanna@melissa.tv",
        "website": "anastasia.net",
      },
      {
        "id": 3,
        "name": "Clementine Bauch",
        "username": "Samantha",
        "email": "Nathan@yesenia.net",
        "website": "ramiro.info",
      },
      {
        "id": 4,
        "name": "Patricia Lebsack",
        "username": "Karianne",
        "email": "Julianne.OConner@kory.org",
        "website": "kale.biz",
      },
      {
        "id": 5,
        "name": "Chelsey Dietrich",
        "username": "Kamren",
        "email": "Lucio_Hettinger@annie.ca",
        "website": "demarco.info",
      },
      {
        "id": 6,
        "name": "Mrs. Dennis Schulist",
        "username": "Leopoldo_Corkery",
        "email": "Karley_Dach@jasper.info",
        "website": "ola.org",
      },
      {
        "id": 7,
        "name": "Kurtis Weissnat",
        "username": "Elwyn.Skiles",
        "email": "Telly.Hoeger@billy.biz",
        "website": "elvis.io",
      },
      {
        "id": 8,
        "name": "Nicholas Runolfsdottir V",
        "username": "Maxime_Nienow",
        "email": "Sherwood@rosamond.me",
        "website": "jacynthe.com",
      },
      {
        "id": 9,
        "name": "Glenna Reichert",
        "username": "Delphine",
        "email": "Chaim_McDermott@dana.io",
        "website": "conrad.com",
      },
      {
        "id": 10,
        "name": "Clementina DuBuque",
        "username": "Moriah.Stanton",
        "email": "Rey.Padberg@karina.biz",
        "website": "ambrose.net",
      }
    ]
  }

})
  

 
                
                
                    
                    Users
                    
                
                
                    
                    Email
                    
                    
                    Name
                    
                    
                    Website
                    
                    
                    Nro
                    
                

                
                    
                    
                        {{data[indextr].email}}
                    

                    
                        {{data[indextr].username}}
                    

                    
                        {{data[indextr].website}}
                    

                    
                        {{data[indextr].id}}

1 Ответ

0 голосов
/ 22 апреля 2020

Сначала нужно объявить высоту, иначе ваша таблица будет расширена в соответствии с ее содержимым. Здесь в основном высота и переполнение-у делают свое дело.

Пример-1: здесь заголовки не фиксированы, значит, если вы прокрутите вниз заголовок будет скрыт. 

table{
  overflow-y:scroll;
  height:100px;
  display:block;
}

А если вы хотите сделать заголовки фиксированными, а затем просто передайте вышеупомянутые css свойства этому конкретному div / area. Например, если вы хотите, чтобы можно было прокручивать только тело таблицы, передайте свойство выше tbody.

...