vue elementui弹出框表格

以下是使用Vue和Element UI实现弹出框表格的示例：

<template>
  <div>
    <el-button type="primary" @click="showDialog">打开弹出框</el-button>
    <el-dialog :visible.sync="dialogVisible" title="表格弹出框" width="800px">
      <el-table :data="tableData" border>
        <el-table-column v-for="column in visibleColumns" :key="column.prop" :prop="column.prop" :label="column.label">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [
        { name: 'John', age: 20, gender: 'Male' },
        { name: 'Jane', age: 25, gender: 'Female' },
        { name: 'Tom', age: 30, gender: 'Male' }
      ],
      columns: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' },
        { prop: 'gender', label: '性别' }
      ],
      visibleColumns: []
    };
  },
  methods: {
    showDialog() {
      this.visibleColumns = this.columns; // 默认显示所有列
      this.dialogVisible = true;
    }
  }
};
</script>

在上面的示例中，我们使用了`el-dialog`和`el-table`组件来实现弹出框和表格。通过点击按钮，可以打开弹出框，并在弹出框中显示表格。表格的列可以通过复选框来自定义显示或隐藏。