root
/
cy_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

字体调小,间隙调小

Browse Source
master
Mr.sun 2 years ago
parent 679856cb5d
commit a5c41b8779
2 changed files with 185 additions and 184 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 368
      src/components/heavyTable/index.vue
  2. 1
      src/views/basicData/locationData/config.js

368
src/components/heavyTable/index.vue
Unescape View File

@ -16,9 +16,11 @@
:value="item.istrue"
></el-checkbox>
</el-checkbox-group>
<el-button slot="reference" plain :disabled="ColumnFilteringFlag"
><i class="el-icon-arrow-down el-icon-menu"
/></el-button>
<el-button
slot="reference"
plain
:disabled="ColumnFilteringFlag"
><i class="el-icon-arrow-down el-icon-menu" /></el-button>
</el-popover>
<!-- <div class="w-table" :class="{ 'w-table_moving': dragState.dragging }"> -->
<el-table
@ -35,8 +37,11 @@
@row-click="rowClick"
@cell-dblclick="cellDblclick"
:row-class-name="tableRowClassName"
:row-style="selectedHighlight"
:row-style="{height:'0px'}"
:cell-style="{padding:'2px'}"
style="font-size: 12px"
>
<!-- :row-style="selectedHighlight" -->
<!-- v-table-drag -->
<template v-for="(item, index) in config">
<el-table-column
@ -68,8 +73,7 @@
(status) =>
item.event && item.event(status, scope.row, item.prop)
"
>{{ "" }}</el-radio
>
>{{ "" }}</el-radio>
</template>
</el-table-column>
<el-table-column
@ -117,7 +121,10 @@
</template>
</el-table-column>
</template>
<template v-if="!item.children" slot-scope="scope">
<template
v-if="!item.children"
slot-scope="scope"
>
<table-cell
:item="item"
:scope="scope"
@ -129,7 +136,10 @@
</el-table>
<!-- </div> -->
<!-- <div v-if="paging && paging.total / paging.size > 1" class="shim"></div> -->
<div v-if="paging" class="pagination">
<div
v-if="paging"
class="pagination"
>
<el-pagination
background
v-if="paging.total / paging.size > 1"
@ -148,192 +158,187 @@
</template>
<script>
import TableCell from "./item.vue";
import elementOffsetTop from "./elementOffsetTop";
import debounce from "./debounce";
import Vue from "vue";
import TableCell from './item.vue'
import elementOffsetTop from './elementOffsetTop'
import debounce from './debounce'
import Vue from 'vue'
// v-table-drag 自定义指令拖动的方式 存在bug
Vue.directive("tableDrag", {
Vue.directive('tableDrag', {
update: function (el, binding, vnode) {
var container = el.parentNode;
var tbody = el.getElementsByClassName("el-table__body-wrapper")[0];
var thead = el.getElementsByClassName("el-table__header-wrapper")[0];
var container = el.parentNode
var tbody = el.getElementsByClassName('el-table__body-wrapper')[0]
var thead = el.getElementsByClassName('el-table__header-wrapper')[0]
// 更新数据时，先还原数据本来的顺序，不然新加载的数据和表头对不上
var trCollection = container.getElementsByTagName("tr");
var trCollection = container.getElementsByTagName('tr')
for (var i = 0; i < trCollection.length; i++) {
var tr = trCollection[i];
var tr = trCollection[i]
if (i == 0) {
var collection = tr.getElementsByTagName("th");
var collection = tr.getElementsByTagName('th')
} else {
var collection = tr.getElementsByTagName("td");
var collection = tr.getElementsByTagName('td')
}
if (collection.length > 1) {
let cellArr = [];
let cellArr = []
for (let j = 0; j < collection.length; j++) {
let cell = collection[j];
let classNames = cell.className;
let className = classNames.split(" ")[0];
let arr = className.split("_");
let cell = collection[j]
let classNames = cell.className
let className = classNames.split(' ')[0]
let arr = className.split('_')
if (arr.length) {
let index = arr[arr.length - 1];
cellArr[index - 1] = cell;
let index = arr[arr.length - 1]
cellArr[index - 1] = cell
}
}
for (let k = 0; k < cellArr.length; k++) {
tr.insertBefore(cellArr[k], collection[k]);
tr.insertBefore(cellArr[k], collection[k])
}
}
}
// 列拖拽开始...
if (!container.className.includes("drag-table"))
container.className = " drag-table";
if (!container.className.includes('drag-table')) container.className = ' drag-table'
thead.onmousedown = function (e) {
const clickX = event.clientX;
const rect = event.target.getBoundingClientRect();
const divLeft = rect.left;
const divRight = rect.right;
const clickX = event.clientX
const rect = event.target.getBoundingClientRect()
const divLeft = rect.left
const divRight = rect.right
//拖动列
if (
event.target.tagName == "DIV" &&
clickX > divLeft + 5 &&
clickX < divRight - 5
) {
if (event.target.tagName == 'DIV' && clickX > divLeft + 5 && clickX < divRight - 5) {
//被拖动的th
var ev_th = event.target.parentNode;
var scrollLeft = tbody.scrollLeft;
var ev_th = event.target.parentNode
var scrollLeft = tbody.scrollLeft
//算出鼠标相对元素的位置
let disX = e.clientX + scrollLeft - ev_th.offsetLeft;
let disY = e.clientY - ev_th.offsetTop;
let disX = e.clientX + scrollLeft - ev_th.offsetLeft
let disY = e.clientY - ev_th.offsetTop
let thWidthArr = []; // 记录所有的th的宽度,依次累加
let thWidthObj = {}; // 记录所有的th的宽度,依次累加
let finallIndex = 0; //最终的th index
let directionIndex = 0; // 单击的是第几个th
let move = 0; // 移动的方向 1-右 2-左
let thWidthArr = [] // 记录所有的th的宽度,依次累加
let thWidthObj = {} // 记录所有的th的宽度,依次累加
let finallIndex = 0 //最终的th index
let directionIndex = 0 // 单击的是第几个th
let move = 0 // 移动的方向 1-右 2-左
const ths = ev_th.parentNode.children;
var len = ths.length - 1; // 删除elementUI最后的class="gutter"的元素
const ths = ev_th.parentNode.children
var len = ths.length - 1 // 删除elementUI最后的class="gutter"的元素
for (let thi = 0; thi < len; thi++) {
const itemth = ths[thi];
itemth.index = thi;
thWidthArr.push(itemth.offsetLeft);
const itemth = ths[thi]
itemth.index = thi
thWidthArr.push(itemth.offsetLeft)
}
directionIndex = ev_th.index;
directionIndex = ev_th.index
// 以鼠标按下的这个th处,创建一个和th内容一样的div,
const createDiv = document.createElement("div");
createDiv.id = "created-div";
container.appendChild(createDiv);
const createDiv = document.createElement('div')
createDiv.id = 'created-div'
container.appendChild(createDiv)
document.onmousemove = (e) => {
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
let left = e.clientX - disX
let top = e.clientY - disY
if (Math.abs(e.clientX - disX - ev_th.offsetLeft) < 10) {
return;
return
}
//绑定元素位置到positionX和positionY上面
//移动当前元素
const thText = ev_th.innerHTML;
createDiv.innerHTML = thText;
createDiv.style.position = "absolute";
createDiv.style.width = ev_th.offsetWidth + "px";
createDiv.style.height = ev_th.offsetHeight + "px";
createDiv.style.background = "rgb(242, 242, 242)";
createDiv.style.lineHeight = ev_th.offsetHeight + "px";
createDiv.style.textAlign = "center";
createDiv.style.left = left + "px";
createDiv.style.top = top + "px";
createDiv.style.whiteSpace = "nowrap";
createDiv.style.textOverflow = "ellipsis";
createDiv.style.overflow = "hidden";
const thText = ev_th.innerHTML
createDiv.innerHTML = thText
createDiv.style.position = 'absolute'
createDiv.style.width = ev_th.offsetWidth + 'px'
createDiv.style.height = ev_th.offsetHeight + 'px'
createDiv.style.background = 'rgb(242, 242, 242)'
createDiv.style.lineHeight = ev_th.offsetHeight + 'px'
createDiv.style.textAlign = 'center'
createDiv.style.left = left + 'px'
createDiv.style.top = top + 'px'
createDiv.style.whiteSpace = 'nowrap'
createDiv.style.textOverflow = 'ellipsis'
createDiv.style.overflow = 'hidden'
finallIndex = 0; //鼠标拖动过程中所停留在的th的index
finallIndex = 0 //鼠标拖动过程中所停留在的th的index
var distance = createDiv.offsetLeft + scrollLeft;
var i = thWidthArr.length - 1;
var distance = createDiv.offsetLeft + scrollLeft
var i = thWidthArr.length - 1
while (i >= 0) {
if (distance >= thWidthArr[i]) {
finallIndex = i;
break;
finallIndex = i
break
}
i--
}
i--;
}
};
document.onmouseup = (e) => {
if (directionIndex < finallIndex) {
move = 1;
move = 1
} //右移
else if (directionIndex > finallIndex) {
move = 2;
move = 2
} //左移
const th_trs = thead.getElementsByTagName("tr");
const td_trs = tbody.getElementsByTagName("tr");
container.removeChild(createDiv);
const th_trs = thead.getElementsByTagName('tr')
const td_trs = tbody.getElementsByTagName('tr')
container.removeChild(createDiv)
// 取消鼠标拖动和鼠标抬起事件
document.onmousemove = null;
document.onmouseup = null;
document.onmousemove = null
document.onmouseup = null
// 如果没有进行拖动操作(鼠标点下就抬起)
if (Math.abs(e.clientX - disX - ev_th.offsetLeft) < 10) {
thWidthArr = [];
disX = 0;
return;
thWidthArr = []
disX = 0
return
}
// 遍历tr,将th和td放到最终的位置上
var itemtr = th_trs[0];
if (itemtr.getElementsByTagName("th").length) {
const ths = itemtr.getElementsByTagName("th");
var itemtr = th_trs[0]
if (itemtr.getElementsByTagName('th').length) {
const ths = itemtr.getElementsByTagName('th')
if (move === 1) {
itemtr.insertBefore(ths[directionIndex], ths[finallIndex + 1]);
itemtr.insertBefore(ths[directionIndex], ths[finallIndex + 1])
} else if (move === 2) {
itemtr.insertBefore(ths[directionIndex], ths[finallIndex]);
itemtr.insertBefore(ths[directionIndex], ths[finallIndex])
}
}
for (let i = 0; i < td_trs.length; i++) {
const itemtr = td_trs[i];
if (itemtr.getElementsByTagName("td").length) {
const tds = itemtr.getElementsByTagName("td");
const itemtr = td_trs[i]
if (itemtr.getElementsByTagName('td').length) {
const tds = itemtr.getElementsByTagName('td')
if (move === 1) {
itemtr.insertBefore(tds[directionIndex], tds[finallIndex + 1]);
itemtr.insertBefore(tds[directionIndex], tds[finallIndex + 1])
} else if (move === 2) {
itemtr.insertBefore(tds[directionIndex], tds[finallIndex]);
itemtr.insertBefore(tds[directionIndex], tds[finallIndex])
}
}
}
// 重置thWidthArr和disX
thWidthArr = [];
disX = 0;
};
thWidthArr = []
disX = 0
}
};
},
});
}
}
}
})
export default {
name: "RfHeavyTable",
name: 'RfHeavyTable',
components: {
TableCell,
TableCell
},
props: {
ColumnFilteringFlag: {
type: Boolean,
default: false,
require: false,
require: false
},
config: {
type: Array,
default: () => [],
default: () => []
},
data: {
type: Array,
default: () => [],
default: () => []
},
paging: {
type: Object,
@ -343,13 +348,13 @@ export default {
total: 0,
autoSize: false,
lineHeight: null,
offsetBottom: null,
}),
offsetBottom: null
})
},
loading: Boolean,
tableClass: {
type: String,
default: "heavyTable",
default: 'heavyTable'
},
tableProps: Object,
@ -359,20 +364,20 @@ export default {
*/
colorStatus: {
type: Object,
default: () => ({}),
default: () => ({})
},
// 是否显示点击样式
isSelectedHighlight: {
type: Boolean,
default: true,
},
default: true
}
},
data() {
return {
radioSlot: "",
radioSlot: '',
selecteddata: [], //选中数据
sortdata: {}, //排序
getIndex: "", //行点击
getIndex: '', //行点击
checkedColumns: [], //列筛选
checkBoxGroup: [], //列筛选
// dragState: {
@ -382,28 +387,26 @@ export default {
// dragging: false, // 是否正在拖动
// direction: undefined, // 拖动方向
// },
tableHeader: this.config, //表头
};
tableHeader: this.config //表头
}
},
computed: {
changeId() {
return this.tableProps && this.tableProps["row-key"]
? this.tableProps["row-key"]
: "id";
},
return this.tableProps && this.tableProps['row-key'] ? this.tableProps['row-key'] : 'id'
}
},
beforeUpdate() {
// 重新布局表格
this.$nextTick(() => {
this.$refs.heavyTable.doLayout();
});
this.$refs.heavyTable.doLayout()
})
},
// 监控列隐藏
watch: {
checkedColumns: {
handler(val) {
this.$emit("configChangeShow", val);
let arr = this.checkBoxGroup.filter((i) => !val.includes(i)); // 未选中
this.$emit('configChangeShow', val)
let arr = this.checkBoxGroup.filter((i) => !val.includes(i)) // 未选中
/**
* 是否记录本地缓存
* localStorage.setItem(this.colTable, JSON.stringify(arr));
@ -412,29 +415,29 @@ export default {
this.config.filter((i) => {
if (arr.indexOf(i.label) != -1) {
this.$nextTick(function () {
i.istrue = false;
this.$refs.heavyTable.doLayout();
});
i.istrue = false
this.$refs.heavyTable.doLayout()
})
} else {
this.$nextTick(function () {
i.istrue = true;
this.$refs.heavyTable.doLayout();
});
i.istrue = true
this.$refs.heavyTable.doLayout()
})
}
});
},
immediate: false,
})
},
immediate: false
}
},
created() {
// 列筛选
this.config.forEach((item, index) => {
this.checkBoxGroup.push(item.label);
this.checkBoxGroup.push(item.label)
if (item.istrue || item.istrue === undefined) {
// 初始化并不是所有都为true,且会存在不写istrue属性的(这时为undefined)
this.checkedColumns.push(item.label);
this.checkedColumns.push(item.label)
}
});
})
/**
* 是否记录本地缓存
*
@ -451,69 +454,66 @@ export default {
},
mounted() {
if (this.paging.autoSize) {
this.autoTableContentHeight();
window.addEventListener(
"resize",
debounce(this.autoTableContentHeight, 1000)
);
this.autoTableContentHeight()
window.addEventListener('resize', debounce(this.autoTableContentHeight, 1000))
}
},
methods: {
// 处理点击表格当前项目按钮事件
handlerEvent(event, row, currItemKey) {
this.$emit(event, row, currItemKey);
this.$emit(event, row, currItemKey)
},
// 翻页
handlePageChange(val) {
this.operatBtnClick("handlePageChange", val, this.propdata);
this.operatBtnClick('handlePageChange', val, this.propdata)
},
// 选择框改变事件
handleSelectionChange(val) {
this.selecteddata = val;
this.$emit("handleselection", val);
this.$emit("selectionChange", val);
this.selecteddata = val
this.$emit('handleselection', val)
this.$emit('selectionChange', val)
},
// 过滤改变事件
sortChange(val) {
console.log(val);
this.sortdata = val;
this.$emit("sortChange", val);
console.log(val)
this.sortdata = val
this.$emit('sortChange', val)
},
// 行点击事件
rowClick(row) {
this.getIndex = row.index;
this.$emit("rowClick", row);
this.getIndex = row.index
this.$emit('rowClick', row)
},
// 双击某个单元格
cellDblclick(row, column) {
this.$emit("cell-dblclick", row, column);
this.$emit('cell-dblclick', row, column)
},
// 清除或者设置点击样式
setIndex(index = "") {
this.getIndex = index;
setIndex(index = '') {
this.getIndex = index
},
// 行点击事件
tableRowClassName({ row, rowIndex }) {
//把每一行的索引放进row
row.index = rowIndex;
row.index = rowIndex
},
// 行点击事件
selectedHighlight({ row, rowIndex }) {
if (this.getIndex === rowIndex && this.isSelectedHighlight) {
return {
"background-color": "#e6f1fe",
};
'background-color': '#e6f1fe'
}
}
const { fieldName, colorList } = this.colorStatus;
if (!fieldName || !colorList) return;
const status = row[fieldName];
const item = colorList.find((it) => it.status === status);
const { fieldName, colorList } = this.colorStatus
if (!fieldName || !colorList) return
const status = row[fieldName]
const item = colorList.find((it) => it.status === status)
if (item && item.color) {
return {
"background-color": `${item.color}`,
};
'background-color': `${item.color}`
}
}
},
// // //拖拽列
@ -638,26 +638,26 @@ export default {
// 设置表格一页最大行数
autoTableContentHeight() {
if (!this.$refs["heavyTable"]) return;
const el = this.$refs["heavyTable"].bodyWrapper;
if (!this.$refs['heavyTable']) return
const el = this.$refs['heavyTable'].bodyWrapper
// const ele = this.$refs["heavyTable"].bodyWrapper.firstChild.children[1].children[0]//el-table__cell
// console.log(ele.offsetHeight)
const fullHeight = document.body.clientHeight;
const offsetTop = elementOffsetTop(el);
const offsetBottom = this.paging.offsetBottom || 92;
const tableLineHeight = this.paging.lineHeight || 57;
const visibleHeight = fullHeight - offsetTop - offsetBottom;
const rows = Math.floor(visibleHeight / tableLineHeight);
const oldPages = Math.ceil(this.paging.total / this.paging.size);
const nowPages = Math.ceil(this.paging.total / rows);
const fullHeight = document.body.clientHeight
const offsetTop = elementOffsetTop(el)
const offsetBottom = this.paging.offsetBottom || 92
const tableLineHeight = this.paging.lineHeight || 57
const visibleHeight = fullHeight - offsetTop - offsetBottom
const rows = Math.floor(visibleHeight / tableLineHeight)
const oldPages = Math.ceil(this.paging.total / this.paging.size)
const nowPages = Math.ceil(this.paging.total / rows)
if (oldPages > nowPages && this.paging.page > nowPages) {
this.paging.page = nowPages;
this.paging.page = nowPages
}
this.paging.size = rows < 1 ? 1 : rows
this.$emit('current-change', this.paging.page)
}
}
}
this.paging.size = rows < 1 ? 1 : rows;
this.$emit("current-change", this.paging.page);
},
},
};
</script>
<style lang="css" scoped>

1
src/views/basicData/locationData/config.js
Unescape View File

@ -10,6 +10,7 @@ export function tableConfig() {
prop: "index",
type: "index",
istrue: true,
},
{
label: "货位id",

Write Preview
Loading…
Cancel
Save