增加size,scrollbar等可选配置

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

View File

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

View File

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

File diff suppressed because it is too large Load Diff