使用Vue修改Table的行數據

一、創建一個Table組件

首先，我們需要創建一個Table組件，該組件將包含多個表格行。我們可以使用props向組件中傳遞一個表格數據數組，然後在組件中循環遍歷表格行。

<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年齡</th>
        <th>性別</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.gender }}</td>
        <td><button @click="editData(index)">編輯</button></td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'Table',
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    editData (index) {
      // 點擊編輯按鈕後，觸發該方法
      // 用來修改當前行的數據
    }
  }
}
</script>

二、修改Table行數據

在Table組件中，我們可以通過click事件來監聽用戶的操作，將相應的數據傳遞給父組件進行處理。在這裡，我們可以在父組件中使用一個數組來存儲修改後的表格行數據，然後將該數組傳遞給Table組件，以更新表格。

<template>
  <div>
    <table-component :tableData="data" @updateData="updateData"></table-component>
  </div>
</template>

<script>
import TableComponent from './TableComponent'

export default {
  name: 'App',
  components: {
    TableComponent
  },
  data () {
    return {
      data: [
        { name: '張三', age: 18, gender: '男' },
        { name: '李四', age: 20, gender: '女' },
        { name: '王五', age: 22, gender: '男' }
      ]
    }
  },
  methods: {
    updateData (newData) {
      this.data = newData
    }
  }
}
</script>

在Table組件中，我們定義了一個editData方法，用來修改表格行的數據。在這裡，我們可以使用splice方法替換掉對應位置的表格行數據，並通過$emit方法向父組件發送updateData事件，將更新後的數據傳遞給父組件進行處理。

<script>
// ...
methods: {
  editData (index) {
    // 彈出一個表單對話框，用來修改當前行的數據
    // 用戶修改完數據後，保存表單，執行以下代碼
    this.tableData.splice(index, 1, newData) // 替換當前行的數據
    this.$emit('updateData', this.tableData) // 向父組件發送updateData事件，更新數據
  }
}
// ...
</script>

三、使用$refs獲取Table組件中的行數據

在前面的示例中，我們使用props來從父組件向Table組件傳遞數據，並通過$emit來將修改後的數據傳遞迴父組件。但是，有些時候，我們需要在Table組件中獲取行數據，然後進行一些其他的操作，比如導出數據、篩選數據等。這時，我們可以使用$refs來獲取Table組件中的行數據。

<template>
  <table-component ref="myTable" :tableData="data"></table-component>
  <button @click="exportData">導出數據</button>
</template>

<script>
import TableComponent from './TableComponent'

export default {
  name: 'App',
  components: {
    TableComponent
  },
  data () {
    return {
      data: [
        { name: '張三', age: 18, gender: '男' },
        { name: '李四', age: 20, gender: '女' },
        { name: '王五', age: 22, gender: '男' }
      ]
    }
  },
  methods: {
    exportData () {
      const tableData = this.$refs.myTable.tableData
      // 將表格數據導出為Excel或CSV文件
    }
  }
}
</script>

在父組件中，我們通過ref屬性來獲取Table組件的引用，並使用$refs來訪問該組件實例的屬性和方法。在這裡，我們可以直接訪問Table組件的tableData屬性，獲取當前表格的行數據，然後對數據進行導出或其它操作。

四、總結

在Vue中，我們可以很方便地創建Table組件，並通過props來向組件中傳遞數據。在組件內部，我們可以使用事件來監聽用戶的操作，並通過$emit來向父組件發送事件，以更新數據。同時，我們也可以使用$refs來獲取組件實例的屬性和方法，以便在父組件中進行一些操作。