添加表格详细内容弹窗

src/api/demoData1.js

@@ -92,6 +92,16 @@ export function getListTotal(data) {
     data: data
   })
 }
+export function getClickInformation(data) {
+  return request({
+    method: 'post',
+    url: '/mixSelect/getClickInformation',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    data: data
+  })
+}
 // export function testPost(data) {
 //   return request({
 //     method: 'post',

src/views/demoData/demoData1.vue

@@ -11,9 +11,6 @@
       </el-select>
 
 
-
-
-
       <!-- cccc -->
       <el-select v-model="mycccc" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择cccc">
         <el-option v-for="item in cccc" :key="item.cccc" :label="item.cccc" :value="item.cccc">
@@ -21,7 +18,6 @@
       </el-select>
 
 
-
       <!-- eee -->
       <el-select v-model="myeee" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择eee">
         <el-option v-for="item in eee" :key="item.eee" :label="item.eee" :value="item.eee">
@@ -94,7 +90,7 @@
 
 
     <div class="list">
-      <el-table :data="mytableList" v-loading="loading">
+      <el-table :data="mytableList" v-loading="loading" @cell-click="cellClick">
         <el-table-column fixed label="用户" prop="ccc" width="100px"></el-table-column>
         <!-- 月 -->
         <el-table-column v-for="(item1, index1) in dateColData" width="360px" :key="index1" align="center" prop=""
@@ -116,6 +112,19 @@
 
     <!-- <button @click="test">2222</button> -->
 
+    <!-- 点击表单内容出现的表格 -->
+    <el-dialog :visible.sync="dialogTableVisible">
+      <el-table :data="gridData">
+        <el-table-column property="ccc" label="ccc" width="100"></el-table-column>
+        <el-table-column property="aaa" label="aaa" width="100"></el-table-column>
+        <el-table-column property="bbb" label="bbb" width="100"></el-table-column>
+        <el-table-column property="cccc" label="cccc" width="100"></el-table-column>
+        <el-table-column property="ddd" label="ddd" width="100"></el-table-column>
+        <el-table-column property="dddd" label="dddd" width="100"></el-table-column>
+        <el-table-column property="eee" label="eee" width="100"></el-table-column>
+      </el-table>
+    </el-dialog>
+
   </div>
 
 </template>
@@ -123,7 +132,7 @@
 <script>
 
 
-import { searchAaa, searchBbb, searchCcc, searchCccc, searchDdd, searchDddd, searchEee, searchTableList, getListTotal } from '@/api/demoData1.js'
+import { searchAaa, searchBbb, searchCcc, searchCccc, searchDdd, searchDddd, searchEee, searchTableList, getListTotal, getClickInformation } from '@/api/demoData1.js'
 
 export default {
   data() {
@@ -153,37 +162,6 @@ export default {
       jjj: false,
       kkk: false,
 
-      // mytableList: [
-      //   {
-      //     "ccc": "wby",
-      //     "data": [
-      //       {
-      //         "month": "2022",
-      //         "i": "wby-i-2022",
-      //         "j": "wby-j-2022",
-      //         "k": "wby-k-2022",
-      //       },
-      //       {
-      //         "month": "2023",
-      //         "i": "wby-i-2023",
-      //         "j": "wby-j-2023",
-      //         "k": "wby-k-2023",
-      //       }
-      //     ],
-      //   },
-      //   {
-      //     "ccc": "wgb",
-      //     "data": [
-      //       {
-      //         "month": "2023",
-      //         "i": "wgb-i-2023",
-      //         "j": "wgb-j-2023",
-      //         "k": "wgb-k-2023",
-      //       },
-      //       {
-      //         "month": "2024",
-      //         "i": "wgb-i-2024",
-
       mytableList: [],
       dateColData: [],
 
@@ -199,6 +177,10 @@ export default {
       inputddd: '',
       inputdddd: '',
 
+      // 弹窗控制
+      dialogTableVisible: false,
+      gridData: [],
+
       // ============================================
 
       // =============================================
@@ -587,6 +569,56 @@ export default {
       })
       console.log(this.mytableList, "this.mytableList");
 
+    },
+
+    cellClick(row, column, cell, event) {
+
+      // 正则匹配出末尾数字
+      let num = parseInt(column.property.match(/\d+$/))
+      // 获取日期
+      let aaa = row.data[num].aaa
+      // 获取键
+      let key = column.property.match(/^(.*?)\d+$/)[1]
+      // 获取值
+      let value = row[column.property]
+      // 获取用户id
+      let ccc = row.ccc
+
+      console.log(key);
+
+
+      var data = {
+        aaa: this.myaaa,
+        bbb: this.mybbb,
+        cccc: this.mycccc,
+        ddd: this.myddd,
+        dddd: this.mydddd,
+        eee: this.myeee,
+        fff: this.fff,
+        ggg: this.ggg,
+        hhh: this.hhh,
+        iii: this.iii,
+        jjj: this.jjj,
+        kkk: this.kkk,
+
+        pageSize: this.pageSize,
+        pageNo: this.currentPage,
+
+        clickAaa: aaa,
+        clickKey: key,
+        clickValue: value,
+        clickCcc: ccc
+      }
+
+
+
+      getClickInformation(data)
+        .then(res => {
+          console.log(res);
+          this.gridData = res.data
+          this.dialogTableVisible = true
+        })
+
     }
   }
 }

vue.config.js

@@ -121,7 +121,7 @@ module.exports = {
         // target: `http://117.122.212.91:32012/`,
         // target: `http://192.144.239.97:20070/`,
         // ===
-        target: `http://192.168.1.37:8088/`,
+        target: `http://192.168.0.114:8088/`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''