Question

我具有以下格式的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>

所以，我该如何更改字段和相应的数据值

Answer 1

尝试一下

我希望这就是您要寻找的https://github.com/allenshaji/vue-editable-table

如何在Vue.js中构建实时可编辑数据表

1 个答案: