Commit 8764ae2b by 李耀琨

优化页面

parent 56e445ed
......@@ -591,6 +591,5 @@ export default {
.form{
margin-top: 20px;
font-size: 14px;
}
</style>
<template>
<div class="statis-box">
<div class="statis-box">
<div class="statis-box-1">
<div class="statis-content">
<div class="statis-title">实施情况统计表
<p style="margin: 5px 25px; font-size: 12px;">实施情况统计表</p>
</div>
<div class="statis-form">
<div class="statis-formHoad" >
<div class="statis-formHoad">
<h4><span>搜索条件</span></h4>
</div>
......@@ -22,8 +18,8 @@
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
:value="item.value"
/>
</el-select>
</li>
<li>项目:</li>
......@@ -33,13 +29,13 @@
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
:value="item.value"
/>
</el-select>
</li>
<li>
<el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button>
<el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
</li>
</ul>
......@@ -54,70 +50,59 @@
<el-button type="primary" @click="exportFile()">导出表格</el-button></div>
</div>
<!-- 表格 -->
<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px; "
:cell-style="cellStyle" :header-cell-style="rowClass" >
<el-table-column prop="organization" label="单位名称" width="80" >
</el-table-column>
<el-table-column prop="number" label="自治区任务数" width="110" >
</el-table-column>
<el-table-column prop="address" label="实际完成数" width="100" >
</el-table-column>
<el-table-column prop="population" label="资金合计" width="80" >
</el-table-column>
<el-table-column prop="telephone" label="自治区下拨资金" width="120" >
</el-table-column>
<el-table-column prop="apply" label="设区市实际配套资金" width="160" >
</el-table-column>
<el-table-column prop="capital" label="县〔市、区〕实际配套资金" width="190" >
</el-table-column>
<el-table-column prop="organization" label="社会投入" width="120" >
</el-table-column>
<el-table-column prop="help" label="党组织(个)" width="90" >
</el-table-column>
<el-table-column prop="help" label="党员(个)" width="80" >
</el-table-column>
<el-table-column prop="help" label="帮扶残疾人(个)" width="120" >
</el-table-column>
<el-table
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
style="width: 100%; font-size:14px; "
:cell-style="cellStyle"
:header-cell-style="rowClass"
>
<el-table-column prop="organization" label="单位名称" width="80" />
<el-table-column prop="number" label="自治区任务数" width="110" />
<el-table-column prop="address" label="实际完成数" width="100" />
<el-table-column prop="population" label="资金合计" width="80" />
<el-table-column prop="telephone" label="自治区下拨资金" width="120" />
<el-table-column prop="apply" label="设区市实际配套资金" width="160" />
<el-table-column prop="capital" label="县〔市、区〕实际配套资金" width="190" />
<el-table-column prop="organization" label="社会投入" width="120" />
<el-table-column prop="help" label="党组织(个)" width="90" />
<el-table-column prop="help" label="党员(个)" width="80" />
<el-table-column prop="help" label="帮扶残疾人(个)" width="120" />
</el-table>
<!-- 分页 -->
<div class="block" >
<div class="block">
<div style=" height :40px; margin-top:12px; margin-left:6px;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10,20,30]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length" >
</el-pagination>
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:'statis',
export default {
name: 'Statis',
data() {
return {
tableData: [{
organization:'居委会',
organization: '居委会'
},],
}],
currentPage: 1, // 当前页码
total: 20, // 总条数
pageSize: 5, // 每页的数据条数
options2: [{
value: '选项1',
label: '广西壮族自治区'
......@@ -135,7 +120,6 @@
label: '南宁市青秀区'
}],
options1: [{
value: '选项1',
label: '2020'
......@@ -155,12 +139,11 @@
value: '',
radio: '1',
// 表单
ruleForm: {
name: '',
region: '',
ryear:'',
ryear: '',
date: '',
type: [],
desc: ''
......@@ -184,64 +167,52 @@
]
}
};},
}
},
methods: {
//每页条数改变时触发 选择一页显示多少行
// 每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.currentPage = 1;
this.pageSize = val;
console.log(`每页 ${val} 条`)
this.currentPage = 1
this.pageSize = val
},
//当前页改变时触发 跳转其他页
// 当前页改变时触发 跳转其他页
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
console.log(`当前页: ${val}`)
this.currentPage = val
},
cellStyle({row,column,rowIndex,columnIndex}) {
return "text-align:center; "
cellStyle({ row, column, rowIndex, columnIndex }) {
return 'text-align:center; '
},
rowClass({row,rowIndex}){
return "text-align:center;"
rowClass({ row, rowIndex }) {
return 'text-align:center;'
},
exportFile(){
console.log('11');
exportFile() {
console.log('11')
},
queryRegion(){
console.log('查询');
queryRegion() {
console.log('查询')
},
// 表单
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
alert('submit!')
} else {
console.log('error submit!!');
return false;
console.log('error submit!!')
return false
}
})
}
});
},
},}
}}
</script>
<style lang="scss">
*{
margin: 0;
padding: 0;
line-height: 1.5;
}
.statis-box{
position: relative;
......@@ -259,29 +230,24 @@
width: 1310px;
padding: 12px 15px;
margin-left: 10%;
background-color: #fff;
}
.statis-title{
height: 100px;
padding: 25px;
margin: 0 12px;
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
border-radius: 5px;
}
.statis-form{
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
border-radius: 5px;
margin: 25px 12px;
}
.statis-formHoad{
width: 100%;
height: 60px;
background-color:#E0E0E0;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
position: relative;
}
.statis-formHoad h4{
width: 100%;
height: 20px;
padding: 16px 20px;
padding: 20px 20px;
display: block;
font-weight: bold;
}
......@@ -292,14 +258,11 @@
}
.statis-input-box{
width:100%;
height :35px;
height :50px;
margin: 20px;
}
.border-bottom{
border-bottom: 1px solid #ccc;
}
.statis-input-box ul li{
float: left;
margin: 3px;
......
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