使用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来获取组件实例的属性和方法，以便在父组件中进行一些操作。