增加size,scrollbar等可选配置
This commit is contained in:
@@ -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,
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
1369
public/index.html
1369
public/index.html
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user