Как создать редактируемую таблицу данных в реальном времени в Vue.js - PullRequest
Новая
       11

Как создать редактируемую таблицу данных в реальном времени в Vue.js

0 голосов
/ 06 сентября 2018

У меня есть данные JSON в следующем формате. 

{ "Employees" : [ { "userId":"rirani", "jobTitleName":"Developer", "firstName":"Romin", "lastName":"Irani", "preferredFullName":"Romin Irani",
"employeeCode":"E1", "region":"CA", "phoneNumber":"408-1234567", "emailAddress":"romin.k.irani@gmail.com" }, { "userId":"nirani", "jobTitleName":"Developer",
"firstName":"Neil", "lastName":"Irani", "preferredFullName":"Neil Irani", "employeeCode":"E2", "region":"CA", "phoneNumber":"408-1111111",
"emailAddress":"neilrirani@gmail.com" }, { "userId":"thanks", "jobTitleName":"Program Directory", "firstName":"Tom", "lastName":"Hanks",
"preferredFullName":"Tom Hanks", "employeeCode":"E3", "region":"CA", "phoneNumber":"408-2222222", "emailAddress":"tomhanks@gmail.com" } ] }

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

Итак, если пользователь выбирает userID, employeeCode, то мне нужно отобразить только те значения в таблице. Так что, если ему нужно было выбрать другие поля, я должен предоставить положение, и данные должны быть изменены в зависимости от выбора. 

<table class="table">
      <thead class="thead-dark">
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Region</th>
          <th scope="col">Phone</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(customer,index) in filteredCustomers">
          <th scope="row">{{customer.userId}}</th>
          <td>{{customer.firstName}}</td>
          <td>{{customer.region}}</td>
          <td>{{customer.phoneNumber}}</td>
        </tr>
      </tbody>
    </table>

Итак, как я могу изменить поля и соответственно значения данных

1 Ответ

0 голосов
/ 08 сентября 2018

Попробуйте это

Надеюсь, это то, что вы ищете https://github.com/allenshaji/vue-editable-table

...