Skip to content

T
template_vue
Commit 5db02deb authored by WBY1026's avatar WBY1026
Browse files
Options

新增dialog分页

parent 3f206a44
Hide whitespace changes
Inline Side-by-side
Showing with 116 additions and 35 deletions
src/api/demoData1.js
View file @ 5db02deb
......@@ -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
View file @ 5db02deb
......@@ -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
View file @ 5db02deb
......@@ -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]: ''
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment