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

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