element tabls 怎么跟Dialog 配合

Element Table 和 Dialog 可以配合使用，实现在弹框中展示表格数据的效果。

1. 在 Dialog 中添加 Element Table 组件，设置 table 的数据源和列信息。

2. 在 Dialog 的打开方法中，调用 table 的数据加载方法，将数据源传递给 table。

3. 在 Dialog 的关闭方法中，清空 table 的数据源，避免下次打开 Dialog 时出现重复数据。

示例代码：

<template>
  <el-dialog :visible.sync="dialogVisible" title="表格数据">
    <el-table :data="tableData" :columns="tableColumns"></el-table>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      tableColumns: [
        { label: '姓名', prop: 'name' },
        { label: '年龄', prop: 'age' },
        { label: '性别', prop: 'gender' }
      ]
    }
  },
  methods: {
    openDialog() {
      this.dialogVisible = true
      this.loadTableData() // 加载表格数据
    },
    closeDialog() {
      this.dialogVisible = false
      this.tableData = [] // 清空表格数据
    },
    loadTableData() {
      // 加载表格数据的方法
      // 例如：this.tableData = await fetchData()
    }
  }
}
</script>