peng92055/smart-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加size，scrollbar等可选配置

Browse Source
This commit is contained in:
julyp
2020-01-17 15:02:45 +08:00
parent ed3a4f5ffa
commit 6eb9319b3d
3 changed files with 879 additions and 583 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/table/index.scss
View File

@@ -6,7 +6,6 @@
width: 100%;
max-width: 100%;
background-color: #fff;
font-size: 14px;
color: #606266;
border: 1px solid #EBEEF5;
border-right: none;
@@ -54,7 +53,7 @@
}
td,
th {
padding: 12px 0;
padding: 6px 0;
min-width: 50px;
box-sizing: border-box;
text-overflow: ellipsis;
@@ -63,10 +62,35 @@
text-align: left;
border-bottom: 1px solid #EBEEF5;
border-right: 1px solid #EBEEF5;
text-align: center;
&.is-hidden>* {
visibility: hidden;
}
}
&.smart-table-custom-large {
td,
th {
padding: 12px 0;
}
}
&.smart-table-custom-middle {
td,
th {
padding: 10px 0;
}
}
&.smart-table-custom-left {
td,
th {
text-align: left;
}
}
&.smart-table-custom-right {
td,
th {
text-align: right;
}
}
.cell {
-webkit-box-sizing: border-box;
box-sizing: border-box;
@@ -75,8 +99,8 @@
white-space: normal;
word-break: break-all;
line-height: 23px;
padding-right: 10px;
padding-left: 10px;
padding-left: 8px;
padding-right: 4px;
}
th>.cell {
display: inline-block;
@@ -84,8 +108,8 @@
box-sizing: border-box;
position: relative;
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
padding-left: 8px;
padding-right: 4px;
width: 100%;
}
.smart-table_body,

51
packages/table/src/core.js
View File

@@ -19,13 +19,20 @@ export default function initMixin(Table) {
const vm = this;
vm.$options = options;
vm.isWindows = isWindows();
vm.scrollHeightFit = vm.isWindows ? 17 : 0;
vm.scrollHeightFit = vm.isWindows ? (options.scrollbarWidth ? options.scrollbarWidth : 8) : 0;
const root = options.selector && document.querySelector(String(options.selector).trim());
if (!root) return;
const table = root.querySelector("table");
if (!table) return;
if (options.size) {
root.classList.add("smart-table-custom-" + options.size)
}
if (options.textAlign) {
root.classList.add("smart-table-custom-" + options.textAlign)
}
const thead = table.querySelector("thead");
const tbody = table.querySelector("tbody");
if (table.hasAttribute("stripe")) {
@@ -37,7 +44,7 @@ export default function initMixin(Table) {
vm.$root = root;
const theadHeight = thead.offsetHeight;
let customHeight = options.tableHeight || 400;
let customHeight = options.tableHeight || 500;
customHeight = typeof customHeight === 'function' ? customHeight() : customHeight;
customHeight = customHeight > theadHeight ? customHeight : (theadHeight + 100);
const tbodyHeight = tbody.offsetHeight;
@@ -54,7 +61,7 @@ export default function initMixin(Table) {
vm.props = initProps(thead);
//获取colgroup数据数组
vm.colgroup = getColgroup(table);
vm.colgroup = getColgroup(thead, tbody, vm.props.theadLength);
//根据头部列的二维数组 获取最小表格宽度
vm.size.tabelWidth = table.style.width = vm.colgroup.reduce((total, num) => total + num)
//初始化fixed元素及宽度
@@ -81,7 +88,7 @@ export default function initMixin(Table) {
if (vm.isWindows) {
let th = document.createElement("th");
th.setAttribute("width", "17");
th.setAttribute("width", vm.scrollHeightFit);
th.setAttribute("rowspan", vm.props.shapes.length);
thead.querySelector("tr").appendChild(th);
}
@@ -166,7 +173,7 @@ function rollupFixed(vm, theadModel, tbodyModel) {
if (vm.isWindows) {
let rightPatch = document.createElement("div");
rightPatch.className = "smart-table_fixed-right-patch";
rightPatch.style.width = "17px";
rightPatch.style.width = vm.scrollHeightFit + "px";
rightPatch.style.height = vm.size.theadHeight + "px";
vm.$root.appendChild(rightPatch)
}
@@ -175,20 +182,31 @@ function rollupFixed(vm, theadModel, tbodyModel) {
}
//根据表格中的tbody第一行 查出每列的宽度并记录
function getColgroup(table) {
function getColgroup(thead, tbody, theadLength) {
let arr = [];
const columns = table.querySelector("tbody tr").querySelectorAll("td");
columns.forEach(column => {
let width = column.offsetWidth;
if (width < 50) {
width = width + 30;
} else if (width >= 50 && width < 100) {
width = width + 50;
} else {
width = width + 60;
if (theadLength === 1) {
//单行
thead.querySelector("tr").querySelectorAll("th").forEach(column => {
let width = getIntByAttr(column, "width", 0);
if (width === 0) {
width = column.offsetWidth > 80 ? column.offsetWidth : 80;
}
arr.push(width)
})
} else {
//多行
tbody.querySelector("tr").querySelectorAll("td").forEach(column => {
let width = column.offsetWidth;
if (width < 50) {
width = width + 10;
} else if (width >= 50 && width < 100) {
width = width + 30;
} else {
width = width + 40;
}
arr.push(width)
})
}
return arr;
}
@@ -265,7 +283,7 @@ function syncPostion(vm) {
}
function initSortEvent(vm) {
let els = Array.from(vm.$root.querySelectorAll("th[sort"));
let els = Array.from(vm.$root.querySelectorAll("th[sort]"));
if (els.length === 0) return;
els.forEach(el => {
el.addEventListener("click", $event => {
@@ -328,6 +346,7 @@ function initProps(thead) {
shapes[index] = shape;
})
})
props.theadLength = rows.length;
props.shapes = shapes;
return props;
}

283
public/index.html
View File

@@ -9,27 +9,268 @@
<style>
body {
padding: 50px 20px;
padding: 10px 20px;
}
.repo-link {
font-size: 16px;
color: #409eff;
text-decoration: none;
margin-right: 15px;
}
.smart-table a {
color: #409eff;
}
.title {
text-align: center;
padding: 30px 0;
padding: 10px 0;
color: #4acccc;
margin: 0;
}
.smart-table {
margin: 50px 0px;
margin: 20px 0px;
}
</style>
</head>
<body>
<h1 class="title">Smart Table Example<a href="https://github.com/peng92055/smart-table" target="_blank"
rel="noopener noreferrer" class="repo-link">
GitHub</a></h1>
<div class="container">
<div class="api-wrap">
<h3>API</h3>
<p> new SmartUI.Table(options)</p>
<p> options: {</p>
<p> &nbsp;&nbsp;&nbsp;selector: 元素容器"string" 必填</p>
<p> &nbsp;&nbsp;&nbsp;tableHeight: 容器高度，数值或函数"number string function" 默认500</p>
<p> &nbsp;&nbsp;&nbsp;size: 表格尺寸（行高度），"string：large、middle、small" 默认small</p>
<p> &nbsp;&nbsp;&nbsp;textAlign: 表格对齐格式，"string：left、rigth、center" 默认center</p>
<p> &nbsp;&nbsp;&nbsp;scrollbarWidth: window系统下滚动条宽度，"number" 默认macos：0 windows:8</p>
<p> }</p>
</div>
<h1 class="title">Smart Table Example</h1>
<!-- smart table example start -->
<div class="example-wrap">
<div class="smart-table" id="smartTable1">
<table stripe>
<thead>
<tr>
<th colspan="1" rowspan="3" fixed sort>
<div class="cell">Id</div>
</th>
<th colspan="1" rowspan="2" width="200" fixed>
<div class="cell">日期</div>
</th>
<th colspan="1" rowspan="2" width="60" sort>
<div class="cell">姓名</div>
</th>
<th colspan="1" width="200" rowspan="1">
<div class="cell">省份</div>
</th>
<th colspan="1" rowspan="1" sort>
<div class="cell">市区</div>
</th>
<th colspan="1" rowspan="1">
<div class="cell">地址</div>
</th>
<th colspan="1" rowspan="1" fixed>
<div class="cell">邮编</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="cell">12</div>
</td>
<td>
<div class="cell">2016-01-03</div>
</td>
<td>
<div class="cell">1王小虎</div>
</td>
<td>
<div class="cell">1上海</div>
</td>
<td>
<div class="cell">2普陀区</div>
</td>
<td>
<div class="cell">3上海市普陀区金沙江路 1518 弄</div>
</td>
<td>
<div class="cell">200331</div>
</td>
</tr>
<tr>
<td>
<div class="cell">13</div>
</td>
<td>
<div class="cell">2016-02-03</div>
</td>
<td>
<div class="cell">2王小虎</div>
</td>
<td>
<div class="cell">3上海</div>
</td>
<td>
<div class="cell">4普陀区</div>
</td>
<td>
<div class="cell">2上海市普陀区金沙江路 1518 弄</div>
</td>
<td>
<div class="cell">200331</div>
</td>
</tr>
<tr>
<td>
<div class="cell">14</div>
</td>
<td>
<div class="cell">2016-03-03</div>
</td>
<td>
<div class="cell">3王小虎</div>
</td>
<td>
<div class="cell">4上海</div>
</td>
<td>
<div class="cell">1普陀区</div>
</td>
<td>
<div class="cell">6上海市普陀区金沙江路 1518 弄</div>
</td>
<td>
<div class="cell">200331</div>
</td>
</tr>
<tr>
<td>
<div class="cell">13</div>
</td>
<td>
<div class="cell">2016-02-03</div>
</td>
<td>
<div class="cell">2王小虎</div>
</td>
<td>
<div class="cell">3上海</div>
</td>
<td>
<div class="cell">4普陀区</div>
</td>
<td>
<div class="cell">2上海市普陀区金沙江路 1518 弄</div>
</td>
<td>
<div class="cell">200331</div>
</td>
</tr>
<tr>
<td>
<div class="cell">14</div>
</td>
<td>
<div class="cell">2016-03-03</div>
</td>
<td>
<div class="cell">3王小虎</div>
</td>
<td>
<div class="cell">4上海</div>
</td>
<td>
<div class="cell">1普陀区</div>
</td>
<td>
<div class="cell">6上海市普陀区金沙江路 1518 弄</div>
</td>
<td>
<div class="cell">200331</div>
</td>
</tr>
<tr>
<td>
<div class="cell">13</div>
</td>
<td>
<div class="cell">2016-02-03</div>
</td>
<td>
<div class="cell">2王小虎</div>
</td>
<td>
<div class="cell">3上海</div>
</td>
<td>
<div class="cell">4普陀区</div>
</td>
<td>
<div class="cell">2上海市普陀区金沙江路 1518 弄</div>
</td>
<td>
<div class="cell">200331</div>
</td>
</tr>
<tr>
<td>
<div class="cell">14</div>
</td>
<td>
<div class="cell">2016-03-03</div>
</td>
<td>
<div class="cell">3王小虎</div>
</td>
<td>
<div class="cell">4上海</div>
</td>
<td>
<div class="cell">1普陀区</div>
</td>
<td>
<div class="cell">6上海市普陀区金沙江路 1518 弄</div>
</td>
<td>
<div class="cell">200331</div>
</td>
</tr>
<tr unsort>
<td>
<div class="cell">15</div>
</td>
<td>
<div class="cell">2016-04-03</div>
</td>
<td>
<div class="cell">5王小虎</div>
</td>
<td>
<div class="cell">6上海</div>
</td>
<td>
<div class="cell">7普陀区</div>
</td>
<td>
<div class="cell">8上海市普陀区金沙江路 1518 弄</div>
</td>
<td>
<div class="cell">200331</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- smart table example start -->
<div class="smart-table" id="smartTable2">
<table>
<thead>
<tr>
@@ -227,11 +468,13 @@
</td>
</tr>
</tbody>
</table style="width: 100%">
</table>
</div>
<!-- smart table example end -->
<!-- smart table example start -->
<div class="smart-table" id="smartTable2">
<!-- smart table example start -->
<div class="smart-table" id="smartTable3">
<table stripe>
<thead>
<tr>
@@ -460,7 +703,7 @@
</table>
</div>
<div class="smart-table" id="smartTable3">
<div class="smart-table" id="smartTable4">
<table>
<thead>
<tr>
@@ -578,20 +821,30 @@
</tbody>
</table>
</div>
<!-- smart table example end -->
</div>
</div>
<script>
new SmartUI.Table({
selector: '#smartTable1',
tableHeight: 300
tableHeight: function () {
return 300
},
})
new SmartUI.Table({
selector: '#smartTable2',
tableHeight: function () {
return 300
}
tableHeight: 300,
textAlign: 'left',
size: 'middle',
scrollbarWidth: 17
})
new SmartUI.Table({
selector: '#smartTable3'
selector: '#smartTable3',
textAlign: 'right',
size: 'large'
})
new SmartUI.Table({
selector: '#smartTable4'
})
</script>