yby

src/views/enterprise/CreateProject.vue

@@ -0,0 +1,90 @@
+<template>
+<!--  添加对照表的按钮-->
+<div>
+  <div class="createproject">
+    <el-button @click="addButton">+</el-button>
+    <div id="buttonContainer">
+      <el-button v-for="buttonId in buttons" :key="buttonId" @click="showInterface(buttonId)">
+        按钮 {{ buttonId }}
+      </el-button>
+      <div v-if="activeButtonId === buttonId" class="interface">
+        这是按钮 {{ buttonId }}对应的界面
+      </div>
+    </div>
+    <!--  对照表目录-->
+  </div>
+  <div>
+    <el-table :data="tableData" height="250" style="width: 100%">
+      <el-table-column prop="date" label="Date" width="180" />
+      <el-table-column prop="name" label="Name" width="180" />
+      <el-table-column prop="address" label="Address" />
+    </el-table>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      buttons: [],
+      activeButtonId: null,
+      tableNames: [],
+    };
+  },
+  methods: {
+    addButton() {
+      const buttonId = Date.now();
+      this.buttons.push(buttonId);
+    },
+    showInterface(buttonId) {
+      this.activeButtonId = buttonId;
+    },
+  },
+};
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-08',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-06',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-07',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+]
+</script>
+
+<style>
+.interface {
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin-top: 10px;
+}
+</style>