当右侧表格太宽时不会换行

This commit is contained in:
falcon 2020-06-25 09:27:38 +08:00
parent 282e578686
commit ebb61dbb40
3 changed files with 2 additions and 87 deletions

View File

@ -22,7 +22,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col" v-show="showPage"> <div class="col-10" v-show="showPage">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item">{{bread.p}}</li> <li class="breadcrumb-item">{{bread.p}}</li>
<li class="breadcrumb-item">{{bread.n}}</li> <li class="breadcrumb-item">{{bread.n}}</li>

View File

@ -110,4 +110,4 @@ body {
/*bootstrap样式重写*/ /*bootstrap样式重写*/
.container { .container {
max-width: 100%; max-width: 100%;
} }

View File

@ -1,85 +0,0 @@
<div id="findPerson">
<div id="para" class="reportFilter">
<input type="hidden" name="ProcedureName" v-model="ProcedureName" />
<input type="hidden" name="reportName" v-model="reportName" />
<input type="hidden" name="sqlStr" v-model="sqlStr" />
<input type="hidden" name="uid" v-model="uid" />
<input type="hidden" name="uName" v-model="uName" />
<!--以下部分为查询条件,根据实际需要修改-->
<label>姓名:<input name="name" value="" placeholder="输入姓名或留空" /></label>
<label>地址:<input name="address" value="" placeholder="输入地址数据" /></label>
<label>地址:<input name="marry" value="" placeholder="是否结婚" /></label>
<div class="btn-group">
<button class="btn btn-primary" v-on:click="find">查询</button>
<button class="btn btn-primary" v-on:click="print">打印</button>
<button class="btn btn-primary" v-on:click="down" v-if="result.length > 0">下载EXCEL</button>
</div>
<!--可修改部分结束-->
</div>
<div id="result" v-if="result.length > 0">
<!--以下部分为存储过程返回数据,根据实际需要修改-->
<table class="table reportTable" id="resultTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>登录用户编号</th>
<th>登录用户名</th>
</tr>
</thead>
<tbody>
<tr v-for="i in result">
<td>{{i.name}}</td>
<td>{{i.age}}</td>
<td>{{i.sex}}</td>
<td>{{i.uid}}</td>
<td>{{i.Uname}}</td>
</tr>
</tbody>
</table>
<!--可修改部分结束-->
</div>
</div>
<script type="text/javascript">
var findPerson = new Vue({
el: "#findPerson",
data: {
//存储过程名称
ProcedureName: "example",
//报表名称
reportName: "报表1",
//除非你知道以下数据含义,否则不要修改
sqlStr: "",
url: myjs.urls.getresult,
result: [],
uid: "",
uName: "",
},
created() {
this.uid = myjs.getUId();
this.uName = myjs.getUName();
},
methods: {
find() {
var sql = myjs.createSql("#para");
this.sqlStr = sql;
console.log(sql);
myjs.post(this.url, { sql: sql }, function (d) {
findPerson.result = d;
});
},
print() {
var sql = myjs.createSql("#para");
this.sqlStr = sql;
myjs.print();
},
down() {
myjs.toExcel.tableToExcel("resultTable", this.reportName);
},
}
});
</script>