动态计算展示宽度

This commit is contained in:
暮光:城中城
2019-08-27 23:21:58 +08:00
parent 63f6b80b79
commit 04f36bf3ad
4 changed files with 22 additions and 12 deletions

File diff suppressed because one or more lines are too long

View File

@@ -1,2 +1,2 @@
!function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var r=window.webpackJsonp;window.webpackJsonp=function(t,c,a){for(var u,i,f,l=0,s=[];l<t.length;l++)i=t[l],o[i]&&s.push(o[i][0]),o[i]=0;for(u in c)Object.prototype.hasOwnProperty.call(c,u)&&(e[u]=c[u]);for(r&&r(t,c,a);s.length;)s.shift()();if(a)for(l=0;l<a.length;l++)f=n(n.s=a[l]);return f};var t={},o={2:0};n.e=function(e){function r(){u.onerror=u.onload=null,clearTimeout(i);var n=o[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),o[e]=void 0)}var t=o[e];if(0===t)return new Promise(function(e){e()});if(t)return t[2];var c=new Promise(function(n,r){t=o[e]=[n,r]});t[2]=c;var a=document.getElementsByTagName("head")[0],u=document.createElement("script");u.type="text/javascript",u.charset="utf-8",u.async=!0,u.timeout=12e4,n.nc&&u.setAttribute("nonce",n.nc),u.src=n.p+""+e+".js?"+{0:"ae1e13bde53c50facad6",1:"0a0403eb1820498dc9bc"}[e];var i=setTimeout(r,12e4);return u.onerror=u.onload=r,a.appendChild(u),c},n.m=e,n.c=t,n.i=function(e){return e},n.d=function(e,r,t){n.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:t})},n.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(r,"a",r),r},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n.oe=function(e){throw console.error(e),e}}([]);
//# sourceMappingURL=doc-db-manifest.js.map?c1844f50fc431da7b290
!function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var r=window.webpackJsonp;window.webpackJsonp=function(t,c,u){for(var a,i,f,l=0,s=[];l<t.length;l++)i=t[l],o[i]&&s.push(o[i][0]),o[i]=0;for(a in c)Object.prototype.hasOwnProperty.call(c,a)&&(e[a]=c[a]);for(r&&r(t,c,u);s.length;)s.shift()();if(u)for(l=0;l<u.length;l++)f=n(n.s=u[l]);return f};var t={},o={2:0};n.e=function(e){function r(){a.onerror=a.onload=null,clearTimeout(i);var n=o[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),o[e]=void 0)}var t=o[e];if(0===t)return new Promise(function(e){e()});if(t)return t[2];var c=new Promise(function(n,r){t=o[e]=[n,r]});t[2]=c;var u=document.getElementsByTagName("head")[0],a=document.createElement("script");a.type="text/javascript",a.charset="utf-8",a.async=!0,a.timeout=12e4,n.nc&&a.setAttribute("nonce",n.nc),a.src=n.p+""+e+".js?"+{0:"a4e51a5424d256972972",1:"0a0403eb1820498dc9bc"}[e];var i=setTimeout(r,12e4);return a.onerror=a.onload=r,u.appendChild(a),c},n.m=e,n.c=t,n.i=function(e){return e},n.d=function(e,r,t){n.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:t})},n.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(r,"a",r),r},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n.oe=function(e){throw console.error(e),e}}([]);
//# sourceMappingURL=doc-db-manifest.js.map?852703c813fad5db2b75

View File

@@ -8,7 +8,7 @@
<body>
<div id="app"></div>
<script type="text/javascript" src="doc-db-manifest.js?c1844f50fc431da7b290"></script><script type="text/javascript" src="doc-db-vendor.js?0a0403eb1820498dc9bc"></script><script type="text/javascript" src="doc-db-index.js?ae1e13bde53c50facad6"></script></body>
<script type="text/javascript" src="doc-db-manifest.js?852703c813fad5db2b75"></script><script type="text/javascript" src="doc-db-vendor.js?0a0403eb1820498dc9bc"></script><script type="text/javascript" src="doc-db-index.js?a4e51a5424d256972972"></script></body>
</html>

View File

@@ -25,11 +25,11 @@
{{executeError}}
</div>
<div v-else>
<el-table :data="executeResultList" stripe border style="width: 100%; margin-bottom: 5px;" v-loading="sqlExecuting">
<el-table :data="executeResultList" stripe border style="width: 100%; margin-bottom: 5px;" class="execute-result-table" v-loading="sqlExecuting" height="600">
<el-table-column width="60px" v-if="executeResultCols.length > 0">
<template slot-scope="scope">{{scope.row._index}}</template>
</el-table-column>
<el-table-column v-for="item in executeResultCols" :prop="item.prop" :label="item.prop">
<el-table-column v-for="item in executeResultCols" :prop="item.prop" :label="item.prop" :width="item.width">
<template slot-scope="scope">
<el-input :value="scope.row[item.prop]" :readonly="true"></el-input>
</template>
@@ -68,6 +68,7 @@
</el-tabs>
</div>
</el-drawer>
<span id="widthCalculate" style="visibility: hidden; white-space: nowrap;"></span>
</div>
</template>
@@ -196,8 +197,17 @@
var dataList = resultData.result || [];
var executeResultCols = [];
if (dataList.length > 0) {
for (var key in dataList[0]) {
executeResultCols.push({prop: key});
var propData = dataList[0];
for (var key in propData) {
// 动态计算宽度~自己想的一个方法666
document.getElementById("widthCalculate").innerText = key;
var width1 = document.getElementById("widthCalculate").offsetWidth;
document.getElementById("widthCalculate").innerText = propData[key];
var width2 = document.getElementById("widthCalculate").offsetWidth;
var width = (width1 > width2) ? width1 : width2;
width = (width < 60) ? 60 : width;
width = (width > 200) ? 200 : width;
executeResultCols.push({prop: key, width: width + 20});
}
for (var i = 0; i < dataList.length; i++) {
dataList[i]._index = i + 1;
@@ -340,7 +350,7 @@
.data-executor-vue .el-table td, .el-table th{
padding: 6px 0;
}
.data-executor-vue .el-input__inner{
.data-executor-vue .execute-result-table .el-input__inner{
height: 25px;
line-height: 25px;
padding: 0 5px;