Vuej 및 부트스트랩 Vue에서 행 편집

Vuej 및 부트스트랩 Vue에서 행 편집

사용자가 편집 버튼으로 행을 편집할 수 있는 테이블을 구현하려고 합니다.

전환 기능을 구현할 수 있었지만 단일 행이 아닌 모든 행이 전환되는 문제가 발생했습니다.

행은 인덱스로 선택해야 한다고 생각하고, 실장에서는 할 수 있지만, 그 용도를 찾을 수 없는 것 같습니다.

Vue.component('employee-data', {
    template:
        /*html*/
        `
        <b-container>
            <h3>Employee Data</h3>
            
            <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" 
                            aria-controls="employee-table"></b-pagination>
            <b-table striped hover :items="employees" id="employee-table"
                    :per-page="perPage" :current-page="currentPage" :fields="fields">

                <template v-slot:cell(employeeName)="row" v-if="edit">
                    <b-form-input v-model="row.item.employeeName"/>
                </template>

                <template v-slot:cell(joinDate)="row" v-if="edit">
                    <b-form-input v-model="row.item.joinDate"/>
                </template>

                <template v-slot:cell(selectedDepartment)="row" v-if="edit">
                    <b-form-input v-model="row.item.selectedDepartment"/>
                </template>
                
                <template v-slot:cell(jobDescription)="row" v-if="edit">
                    <b-form-input v-model="row.item.jobDescription"/>
                </template>

                <template v-slot:cell(actions)="row">
                    <b-button @click="toggleEdit(row.index)">
                        {{ edit ? 'Save' : 'Edit' }}
                    </b-button>
                </template>

            </b-table>
        </b-container>
    `,
    props: {
        employees: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            edit: false,
            perPage: 3,
            currentPage: 1,
            fields: [
                {
                    key: 'employeeName',
                    label: 'Employee Name',
                    sortable: true
                  },
                  {
                    key: 'joinDate',
                    label: 'Join Date',
                    sortable: true
                  },
                  {
                    key: 'selectedDepartment',
                    label: 'Selected Department',
                    sortable: true,
                  },
                  {
                    key: 'jobDescription',
                    label: 'Job Description',
                    sortable: true,
                  },
                  {
                    key: 'actions',
                    label: 'Actions',
                    sortable: false,
                  }
              ]
        }
    },
    computed: {
        rows() {
            return this.employees.length
        }
    },
    methods: {
        toggleEdit(index){
            this.edit = !this.edit
        }
    }
})

편집: 문제를 보여주는 JSFiddle입니다.

고유 식별자(ID 등)가 있고 한 번에 하나의 행만 편집할 수 있는 경우,edit에 가변적인id현재 편집 중인 행의 경우.

범용 슬롯을 사용할 수도 있습니다.v-slot:cell()템플릿의 기입량을 줄입니다.

예

new Vue({
  el: "#app",
  data() {
    return {
      edit: null,
      employees: [{
          id: 0,
          employeeName: "Jane",
          joinDate: "11-11-1111",
          selectedDepartment: "IT",
          jobDescription: "Nerd"
        },
        {
          id: 1,
          employeeName: "Peter",
          joinDate: "12-12-1212",
          selectedDepartment: "Accounting",
          jobDescription: "Moneier"
        }
      ],
      fields: [{
          key: 'employeeName',
          label: 'Employee Name',
          sortable: true
        },
        {
          key: 'joinDate',
          label: 'Join Date',
          sortable: true
        },
        {
          key: 'selectedDepartment',
          label: 'Selected Department',
          sortable: true
        },
        {
          key: 'jobDescription',
          label: 'Job Description',
          sortable: true
        },
        {
          key: 'actions',
          label: 'Actions'
        }
      ]
    }
  },
  computed: {
    rows() {
      return this.employees.length
    }
  },
  methods: {
    onEdit(id) {
      this.edit = this.edit !== id ? id : null;
    }
  }
})

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.css" />

<script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.js"></script>

<div id="app">
  <b-table striped hover :items="employees" :fields="fields">
    <template v-slot:cell()="{ value, item, field: { key }}">
      <template v-if="edit != item.id">{{ value }}</template>
    <b-form-input v-else v-model="item[key]" />
    </template>

    <template v-slot:cell(actions)="{ item: { id }}">
        <b-dropdown variant="primary" text="Actions">
          <b-dropdown-item @click="onEdit(id)">{{ edit === id ? 'Save' : 'Edit' }}</b-dropdown-item>
          <b-dropdown-divider></b-dropdown-divider>
          <b-dropdown-item @click="onDelete(id)">Delete</b-dropdown-item>
        </b-dropdown>
      </template>
  </b-table>
</div>

각 행에 고유 식별자가 없거나 한 번에 여러 행을 편집할 수 있는 경우 항목에 플래그를 추가할 수 있습니다.isEditing이 예에서는 행이 현재 편집 중인지 여부를 전환합니다.

예 2

new Vue({
  el: "#app",
  data() {
    return {
      employees: [{
          id: 0,
          employeeName: "Jane",
          joinDate: "11-11-1111",
          selectedDepartment: "IT",
          jobDescription: "Nerd"
        },
        {
          id: 1,
          employeeName: "Peter",
          joinDate: "12-12-1212",
          selectedDepartment: "Accounting",
          jobDescription: "Moneier"
        }
      ],
      fields: [{
          key: 'employeeName',
          label: 'Employee Name',
          sortable: true
        },
        {
          key: 'joinDate',
          label: 'Join Date',
          sortable: true
        },
        {
          key: 'selectedDepartment',
          label: 'Selected Department',
          sortable: true
        },
        {
          key: 'jobDescription',
          label: 'Job Description',
          sortable: true
        },
        {
          key: 'actions',
          label: 'Actions'
        }
      ]
    }
  },
  computed: {
    rows() {
      return this.employees.length
    }
  },
  methods: {
    onEdit(item) {
      if (item.isEditing)
        item.isEditing = false;
      else
        this.$set(item, 'isEditing', true)
    }
  }
})

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.css" />

<script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.js"></script>

<div id="app">
  <b-table striped hover :items="employees" :fields="fields">
    <template v-slot:cell()="{ value, item, field: { key }}">
      <template v-if="!item.isEditing">{{ value }}</template>
    <b-form-input v-else v-model="item[key]" />
    </template>

    <template v-slot:cell(actions)="{ item }">
        <b-dropdown variant="primary" text="Actions">
          <b-dropdown-item @click="onEdit(item)">{{ item.isEditing ? 'Save' : 'Edit' }}</b-dropdown-item>
          <b-dropdown-divider></b-dropdown-divider>
          <b-dropdown-item>Delete</b-dropdown-item>
        </b-dropdown>
      </template>
  </b-table>
</div>

언급URL : https://stackoverflow.com/questions/64629051/edit-row-in-vuejs-and-bootstrap-vue