Vue에서 편집 가능한 테이블을 구현하는 방법

많은 웹 애플리케이션에서 테이블은 필수 구성 요소입니다. 테이블에는 일반적으로 많은 양의 데이터가 있으므로 사용자 경험을 개선하려면 테이블에 몇 가지 특정 기능이 필요합니다. 중요한 기능 중 하나는 편집 가능성입니다. 이 기사에서는 Vue.js를 사용하여 편집 가능한 테이블을 구현하는 방법을 살펴보고 구체적인 코드 예제를 제공합니다.

1단계: 데이터 준비

먼저 테이블에 사용할 데이터를 준비해야 합니다. JSON 객체를 사용하여 테이블의 데이터를 저장하고 Vue 인스턴스의 data 속성에 저장할 수 있습니다. 이 예에서는 이름, 수량, 가격이라는 세 개의 열이 있는 간단한 테이블을 만듭니다. 사용할 샘플 데이터는 다음과 같습니다.

data: {
  items: [
    { name: 'Item 1', quantity: 1, price: 10 },
    { name: 'Item 2', quantity: 2, price: 20 },
    { name: 'Item 3', quantity: 3, price: 30 }
  ]
}

2단계: 테이블 구성 요소 생성

Vue.js 구성 요소를 사용하여 테이블을 생성합니다. 컴포넌트 사용의 이점 중 하나는 Vue 애플리케이션 내에서 여러 번 재사용하고 사용할 수 있다는 것입니다. 다음은 우리가 생성할 테이블 구성 요소의 기본 구조입니다.

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Quantity</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items">
        <td>{{ item.name }}</td>
        <td>{{ item.quantity }}</td>
        <td>{{ item.price }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'TableComponent',
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

구성 요소의 이름은 "TableComponent"이며 props 속성을 사용하여 이전 데이터 컬렉션을 해당 속성으로 받습니다. v-for 지시문은 테이블의 행을 렌더링하는 데 사용됩니다. 이 지시어는 items 배열의 각 객체를 반복하여 해당 행을 생성합니다. v-for指令用于渲染表格中的行。该指令循环遍历items数组中的每个对象并创建对应的行。

步骤3：启用编辑

现在，我们已经可以在应用程序中显示表格了。下一步是使表格可编辑。为了实现这一点，我们将添加一个“编辑”按钮。用户单击该按钮后，将启用相应单元格的编辑功能。

以下是我们将在表格中添加的编辑按钮的基本代码：

<template>
  <!---  添加按钮  -->
  <table>
    <!---  前面的表头和tbody就不再赘述  -->
    <tfoot>
      <tr>
        <td colspan="3">
          <button @click="addRow">Add Row</button>
        </td>
      </tr>
    </tfoot>
  </table>
</template>

<script>
export default {
  name: 'TableComponent',
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  methods: {
    addRow() {
      this.items.push({
        name: '',
        quantity: 0,
        price: 0
      })
    }
  }
}
</script>

我们添加了一个按钮，当用户单击该按钮时，将调用addRow方法。该方法将向items数组添加一个新项目对象，初始值为空字符串、0和0。

步骤4：启用单元格编辑

现在，我们已经有了添加新行的功能。下一步是启用单元格编辑功能。一旦用户单击编辑按钮，我们将使相关单元格变为可编辑状态。

我们将使用以下代码来启用单元格编辑功能：

<template>
  <table>
    <!---  前面的表头、tbody和tfoot  -->

    <tbody>
      <tr v-for="(item, index) in items" :key="index">
        <td :contenteditable="item.editable" @dblclick="toggleCellEdit(index, 'name')">{{ item.name }}</td>
        <td :contenteditable="item.editable" @dblclick="toggleCellEdit(index, 'quantity')">{{ item.quantity }}</td>
        <td :contenteditable="item.editable" @dblclick="toggleCellEdit(index, 'price')">{{ item.price }}</td>
        <td>
          <button @click="toggleRowEdit(index)">Edit</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'TableComponent',
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  methods: {
    addRow() {
      // 添加新行
    },
    toggleRowEdit(index) {
      let item = this.items[index]
      item.editable = !item.editable
    },
    toggleCellEdit(index, key) {
      let item = this.items[index]
      if (item.editable) {
        return
      }
      item.editable = true
      let el = this.$refs['cell-' + index + '-' + key]
      let oldVal = el.innerText
      el.innerHTML = '<input type="text" value="' + oldVal + '" @blur="cellEditDone(' + index + ', '' + key + '', $event)">'
      el.focus()

    },
    cellEditDone(index, key, event) {
      let item = this.items[index]
      item.editable = false
      item[key] = event.target.value
    }
  }
}
</script>

我们将添加一个顶级属性“editable”，以跟踪表格行和单元格的编辑状态。在默认情况下，editable设置为false。

使用toggleRowEdit方法，我们可以在单击编辑按钮时切换行的状态。如果行当前是非编订状态，函数将行的editable值设置为true，并在单元格中添加一个文本框，以使编辑状态启动。在此状态下，如果单击其他单元格，我们将使用toggleCellEdit方法来切换单元格的状态。

该方法将原始文本替换为包含文本框的HTML元素，并将其聚焦到文本框中。在输入完成后，将调用单元格编辑完成方法cellEditDone

3단계: 편집 활성화

이제 애플리케이션에 테이블을 표시할 준비가 되었습니다. 다음 단계는 테이블을 편집 가능하게 만드는 것입니다. 이를 달성하기 위해 "편집" 버튼을 추가하겠습니다. 사용자가 버튼을 클릭하면 해당 셀의 편집 기능이 활성화됩니다.

다음은 테이블에 추가할 편집 버튼의 기본 코드입니다.

<template>
  <div>
    <table-component :items="items" />
  </div>
</template>

<script>
import TableComponent from './TableComponent.vue'

export default {
  name: 'App',
  components: {
    TableComponent
  },
  data: {
    items: [
      { name: 'Item 1', quantity: 1, price: 10 },
      { name: 'Item 2', quantity: 2, price: 20 },
      { name: 'Item 3', quantity: 3, price: 30 }
    ]
  }
}
</script>

버튼을 추가했으며 사용자가 버튼을 클릭하면 addRow 메서드가 호출됩니다. 이 메서드는 items 배열에 새 항목 개체를 추가하며 초기 값은 빈 문자열, 0 및 0입니다.

4단계: 셀 편집 활성화

이제 새 행을 추가할 수 있습니다. 다음 단계는 셀 편집을 활성화하는 것입니다. 사용자가 편집 버튼을 클릭하면 해당 셀을 편집 가능하게 만듭니다. 🎜🎜다음 코드를 사용하여 셀 편집을 활성화합니다. 🎜rrreee🎜테이블 행과 셀의 편집 상태를 추적하기 위해 최상위 속성인 "editable"을 추가합니다. 기본적으로 편집 가능은 false로 설정됩니다. 🎜🎜toggleRowEdit 메서드를 사용하면 편집 버튼을 클릭할 때 행의 상태를 전환할 수 있습니다. 행이 현재 편집되지 않은 경우 함수는 행의 편집 가능한 값을 true로 설정하고 셀에 텍스트 상자를 추가하여 편집 상태를 활성화합니다. 이 상태에서 다른 셀을 클릭하면 toggleCellEdit 메서드를 사용하여 셀 상태를 전환합니다. 🎜🎜이 방법은 원본 텍스트를 텍스트 상자가 포함된 HTML 요소로 대체하고 텍스트 상자에 초점을 맞춥니다. 입력이 완료되면 셀 편집 완료 메소드 cellEditDone가 호출되어 데이터 컬렉션에 값을 업데이트하고 편집 상태를 닫습니다. 🎜🎜5단계: 앱 실행🎜🎜앱을 실행하고 편집 가능한 양식을 테스트할 준비가 되었습니다. 다음은 편집 가능한 테이블 구성 요소를 렌더링하고 테스트하는 데 사용되는 기본 Vue.js 컨텍스트입니다. 🎜rrreee🎜 항목 속성을 사용하여 초기화할 때 테이블 구성 요소에 전달합니다. 이렇게 하면 구성 요소 인스턴스가 데이터 개체에 액세스하여 테이블에 렌더링할 수 있습니다. 새 행을 추가하고 기존 행을 편집하는 기능은 잘 작동합니다. 🎜🎜요약🎜🎜이 기사에서는 Vue.js를 사용하여 편집 가능한 테이블을 만드는 방법을 배웠습니다. Vue 구성 요소를 사용하여 테이블을 구성하는 방법, 편집 가능성을 활성화하는 방법, 입력을 처리하고 데이터 컬렉션에 저장하는 방법을 배웠습니다. 우리는 귀하의 편의를 위해 완전한 코드 예제를 제공하고 테스트했습니다. 이 기사에서 살펴본 기술을 사용하면 모든 기능을 갖춘 고도로 사용자 정의 가능한 양식을 빠르고 쉽게 만들어 웹 애플리케이션 사용자 경험을 향상시킬 수 있습니다. 🎜

위 내용은 Vue에서 편집 가능한 테이블을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!