新增dialog分页

src/api/demoData1.js

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

src/views/demoData/demoData1.vue

@@ -5,26 +5,26 @@
     <!-- 这里是选择栏 -->
     <div class="select">
       <!-- aaa -->
-      <el-select v-model="myaaa" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择aaa">
+      <el-select v-model="myaaa" multiple clearable style="margin-left: 20px; width: 300px;" placeholder="请选择aaa">
         <el-option v-for="item in aaa" :key="item.month" :label="item.month" :value="item.month">
         </el-option>
       </el-select>
 
 
       <!-- cccc -->
-      <el-select v-model="mycccc" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择cccc">
+      <el-select v-model="mycccc" multiple clearable style="margin-left: 20px; width: 300px;" placeholder="请选择cccc">
         <el-option v-for="item in cccc" :key="item.cccc" :label="item.cccc" :value="item.cccc">
         </el-option>
       </el-select>
 
 
       <!-- eee -->
-      <el-select v-model="myeee" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择eee">
+      <el-select v-model="myeee" multiple clearable style="margin-left: 20px; width: 300px;" placeholder="请选择eee">
         <el-option v-for="item in eee" :key="item.eee" :label="item.eee" :value="item.eee">
         </el-option>
       </el-select>
 
-      <el-switch v-model="advancedSearch" active-text="高级搜索" inactive-text="">
+      <el-switch v-model="advancedSearch" active-text="高级搜索" inactive-text="" style="float: right;margin-right: 40px;">
       </el-switch>
 
     </div>
@@ -41,7 +41,7 @@
           </template>
         </el-autocomplete>
 
-        <el-tag v-for="tag in mybbb" :key="tag" closable @close="handleCloseBbb(tag)">
+        <el-tag v-for="tag in mybbb" :key="tag" closable @close="handleCloseBbb(tag)" style="margin-left: 10px;">
           {{ tag }}
         </el-tag>
 
@@ -55,7 +55,7 @@
             <div class="name">{{ item.ddd }}</div>
           </template>
         </el-autocomplete>
-        <el-tag v-for="tag in myddd" :key="tag" closable @close="handleCloseDdd(tag)">
+        <el-tag v-for="tag in myddd" :key="tag" closable @close="handleCloseDdd(tag)" style="margin-left: 10px;">
           {{ tag }}
         </el-tag>
       </div>
@@ -70,7 +70,7 @@
 
         </el-autocomplete>
 
-        <el-tag v-for="tag in mydddd" :key="tag" closable @close="handleCloseDddd(tag)">
+        <el-tag v-for="tag in mydddd" :key="tag" closable @close="handleCloseDddd(tag)" style="margin-left: 10px;">
           {{ tag }}
         </el-tag>
       </div>
@@ -78,17 +78,16 @@
     <div class="checkBox">
       <el-checkbox-group v-model="myCheckBox" :min="0" :max="3">
         <el-checkbox v-for="check in checkBox" :label="check" :key="check">{{ check }}</el-checkbox>
+        <el-button type="primary" icon="el-icon-search" @click="searchToGetInfo" style="margin-left: 20px;">查询</el-button>
+        <el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
+        <el-button type="success" icon="el-icon-download" style="float: right; margin-right: 40px;">导出</el-button>
       </el-checkbox-group>
-    </div>
 
-    <div class="button">
-      <el-button type="primary" @click="searchToGetInfo">查询</el-button>
-      <el-button type="primary" @click="resetForm">重置</el-button>
-      <el-button type="primary" @click="test">测试</el-button>
     </div>
 
 
 
+
     <div class="list">
       <el-table :data="mytableList" v-loading="loading" @cell-click="cellClick">
         <el-table-column fixed label="用户" prop="ccc" width="100px"></el-table-column>
@@ -114,17 +113,35 @@
 
     <!-- 点击表单内容出现的表格 -->
     <el-dialog :visible.sync="dialogTableVisible">
-      <el-table :data="gridData">
-        <el-table-column property="ccc" label="ccc" width="100"></el-table-column>
+      <el-table :data="gridData" :cell-style="setCellColor">
+        <el-table-column fixed 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-column property="fff" label="fff" width="100"></el-table-column>
+        <el-table-column property="ggg" label="ggg" width="100"></el-table-column>
+        <el-table-column property="hhh" label="hhh" width="100"></el-table-column>
+        <el-table-column property="iii" label="iii" width="100"></el-table-column>
+        <el-table-column property="jjj" label="jjj" width="100"></el-table-column>
+        <el-table-column property="kkk" label="kkk" width="100"></el-table-column>
+
+        <el-table-column property="lll" label="lll" width="100"></el-table-column>
+        <el-table-column property="mmm" label="mmm" width="100"></el-table-column>
       </el-table>
+
+      <el-pagination @size-change="handleSizeChangeInDialog" @current-change="handleCurrentChangeInDialog"
+        :current-page="currentPageInDialog" :page-sizes="[10, 20]" :page-size="pageSizeInDialog"
+        layout="total, sizes, prev, pager, next, jumper" :total="totalPageInDialog">
+      </el-pagination>
+
     </el-dialog>
 
+
+
   </div>
 
 </template>
@@ -132,7 +149,7 @@
 <script>
 
 
-import { searchAaa, searchBbb, searchCcc, searchCccc, searchDdd, searchDddd, searchEee, searchTableList, getListTotal, getClickInformation } from '@/api/demoData1.js'
+import { searchAaa, searchBbb, searchCcc, searchCccc, searchDdd, searchDddd, searchEee, searchTableList, getListTotal, getClickInformation, getClickInformationPageNum } from '@/api/demoData1.js'
 
 export default {
   data() {
@@ -169,6 +186,10 @@ export default {
       pageSize: 30,
       currentPage: 1,
 
+      totalPageInDialog: 100,
+      pageSizeInDialog: 10,
+      currentPageInDialog: 1,
+
       loading: true,
 
       advancedSearch: false,
@@ -180,6 +201,8 @@ export default {
       // 弹窗控制
       dialogTableVisible: false,
       gridData: [],
+      dialogTempData: {},
+      clickKey: null,
 
       // ============================================
 
@@ -299,17 +322,43 @@ export default {
       });
     },
 
+    // 主页分页
     handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
+      // console.log(`每页 ${val} 条`);
       this.pageSize = val
       this.searchToGetInfo()
     },
     handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
+      // console.log(`当前页: ${val}`);
       this.currentPage = val
 
       this.searchToGetInfo()
     },
+    // 弹窗分页
+    handleSizeChangeInDialog(val) {
+      // console.log(`每页 ${val} 条`);
+      this.pageSizeInDialog = val
+      this.dialogTempData.pageSize = this.pageSizeInDialog
+      this.dialogTempData.pageNo = this.currentPageInDialog
+      getClickInformation(this.dialogTempData)
+        .then(res => {
+          console.log(res);
+          this.gridData = res.data
+          this.dialogTableVisible = true
+        })
+    },
+    handleCurrentChangeInDialog(val) {
+      // console.log(`当前页: ${val}`);
+      this.currentPageInDialog = val
+      this.dialogTempData.pageSize = this.pageSizeInDialog
+      this.dialogTempData.pageNo = this.currentPageInDialog
+      getClickInformation(this.dialogTempData)
+        .then(res => {
+          console.log(res);
+          this.gridData = res.data
+          this.dialogTableVisible = true
+        })
+    },
     resetForm() {
       this.myCheckBox = ['fff'],
         this.myaaa = []
@@ -331,11 +380,6 @@ export default {
       this.searchToGetInfo()
     },
 
-    test() {
-      console.log(this.bbb);
-      console.log(this.ddd);
-      console.log(this.dddd);
-    },
 
     // 匹配方法 ======
     querySearchBbb(queryString, cb) {
@@ -426,7 +470,7 @@ export default {
         })
       });
 
-      console.log(dateTypeName, "一级表头");
+      // console.log(dateTypeName, "一级表头");
 
       // 添加表头数据
       // 遍历dateTypeName
@@ -437,7 +481,7 @@ export default {
           children: [
             {
               prop: Object.keys(item)[1] + index,
-              label: null
+              label: Object.keys(item)[1] + "的值"
             }
           ]
         })
@@ -473,7 +517,7 @@ export default {
         })
       });
 
-      console.log(dateTypeName, "一级表头");
+      // console.log(dateTypeName, "一级表头");
 
       // 添加表头数据
       // 遍历dateTypeName
@@ -527,7 +571,7 @@ export default {
         })
       });
 
-      console.log(dateTypeName, "一级表头");
+      // console.log(dateTypeName, "一级表头");
 
       // 添加表头数据
       // 遍历dateTypeName
@@ -584,10 +628,13 @@ export default {
       // 获取用户id
       let ccc = row.ccc
 
-      console.log(key);
+      // 为下面高亮准备
+      this.clickKey = key
+      console.log('高亮赋值' + this.clickKey);
+
 
 
-      var data = {
+      this.dialogTempData = {
         aaa: this.myaaa,
         bbb: this.mybbb,
         cccc: this.mycccc,
@@ -601,35 +648,59 @@ export default {
         jjj: this.jjj,
         kkk: this.kkk,
 
-        pageSize: this.pageSize,
-        pageNo: this.currentPage,
+        pageSize: this.pageSizeInDialog,
+        pageNo: this.currentPageInDialog,
 
         clickAaa: aaa,
         clickKey: key,
         clickValue: value,
-        clickCcc: ccc
-      }
-
+        clickCcc: ccc,
 
+      }
 
-      getClickInformation(data)
+      // 获取总条数
+      getClickInformationPageNum(this.dialogTempData)
         .then(res => {
           console.log(res);
+          this.totalPageInDialog = res.data
+        })
+
+      // 获取信息
+      getClickInformation(this.dialogTempData)
+        .then(res => {
           this.gridData = res.data
+          console.log(res.data);
           this.dialogTableVisible = true
         })
 
+    },
+
+    // 高亮某一列
+    setCellColor({ row, column, rowIndex, columnIndex }) {
+      // console.log(column.property);
+      if (column.property == this.clickKey) {
+        return { 'background-color': '#67c23a', 'color': '#fff' }
+      }
     }
   }
 }
 </script>
 
 <style scoped>
+
+::v-deep .el-table__body tr:hover>td {
+  background-color: pink !important;
+}
+
 .checkBox {
   margin-top: 20px;
   margin-left: 20px;
 }
 
+.name {
+  margin-left: 10px;
+}
+
 .button {
   margin-top: 20px;
   margin-left: 20px;

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.0.114:8088/`,
+        target: `http://192.168.1.37:8088/`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''