使用Vue修改Table的行数据

一、创建一个Table组件

首先，我们需要创建一个Table组件，该组件将包含多个表格行。我们可以使用props向组件中传递一个表格数据数组，然后在组件中循环遍历表格行。

二、修改Table行数据

在Table组件中，我们可以通过click事件来监听用户的操作，将相应的数据传递给父组件进行处理。在这里，我们可以在父组件中使用一个数组来存储修改后的表格行数据，然后将该数组传递给Table组件，以更新表格。

在Table组件中，我们定义了一个editData方法，用来修改表格行的数据。在这里，我们可以使用splice方法替换掉对应位置的表格行数据，并通过$emit方法向父组件发送updateData事件，将更新后的数据传递给父组件进行处理。

三、使用$refs获取Table组件中的行数据

在前面的示例中，我们使用props来从父组件向Table组件传递数据，并通过$emit来将修改后的数据传递回父组件。但是，有些时候，我们需要在Table组件中获取行数据，然后进行一些其他的操作，比如导出数据、筛选数据等。这时，我们可以使用$refs来获取Table组件中的行数据。

在父组件中，我们通过ref属性来获取Table组件的引用，并使用$refs来访问该组件实例的属性和方法。在这里，我们可以直接访问Table组件的tableData属性，获取当前表格的行数据，然后对数据进行导出或其它操作。

四、总结

在Vue中，我们可以很方便地创建Table组件，并通过props来向组件中传递数据。在组件内部，我们可以使用事件来监听用户的操作，并通过$emit来向父组件发送事件，以更新数据。同时，我们也可以使用$refs来获取组件实例的属性和方法，以便在父组件中进行一些操作。