el-dialog和el-table数据联动

el-dialog和el-table的数据联动可以通过以下几个步骤实现：

1. 在el-dialog中定义需要编辑的表单字段，绑定表单数据对象。

<el-dialog v-model="dialogVisible" title="编辑数据">
  <el-form :model="formData" ref="form">
    <!-- 表单字段 -->
    <el-form-item label="名称" prop="name">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model.number="formData.age"></el-input>
    </el-form-item>

    <!-- 其他表单字段 -->

  </el-form>
</el-dialog>

2. 在el-table中定义展示数据的列，并绑定数据列表。

<el-table :data="tableData">
  <el-table-column label="名称" prop="name"></el-table-column>
  <el-table-column label="年龄" prop="age"></el-table-column>

  <!-- 其他列 -->

</el-table>

3. 在页面中使用Vue的双向数据绑定，将el-dialog中的表单数据与el-table中的数据列表进行联动。

export default {
  data() {
    return {
      dialogVisible: false, // 控制对话框显示隐藏
      formData: {}, // 表单数据对象
      tableData: [], // 数据列表
    };
  },
  methods: {
    editData(row) {
      this.formData = { ...row }; // 将选中行的数据赋值给表单对象
      this.dialogVisible = true; // 打开对话框
    },
    saveData() {
      // 保存数据逻辑
      // 更新tableData中对应的数据
      // 关闭对话框
    },
  },
};

在el-dialog中的编辑按钮绑定`editData`方法，当点击编辑按钮时，会将选中行的数据赋值给表单对象，并打开el-dialog对话框。

在el-dialog中的保存按钮绑定`saveData`方法，当点击保存按钮时，执行保存数据的逻辑，更新tableData中对应的数据，并关闭el-dialog对话框。

这样就实现了el-dialog和el-table的数据联动。