table父组件
<template>
<el-table
v-bind="$attr"
:data="data"
:border="border"
:stripe="stripe"
height="100%"
class="cus-table"
style="width: 100%">
<el-table-column v-if="colIndex" label="序号" type="index" width="66" align="center" ></el-table-column>
<child :headAlign="headAlign" :subHeadAlign="subHeadAlign" v-for="(item,index) in columns" :key="index" :col="item">
<template #cusSlotScope="{row,cols}">
<slot :data="row" :name="cols.slotName"></slot>
</template>
</child>
<slot></slot>
</el-table>
</template>
<script>
import child from "@/component/elTableCom/childTable.vue";
import { ref } from "vue";
let scrollHeight = 0;
let currentScrollTop = 0;
let maxScrollTop = 0;
let timeInter = null;
let timeInter2 = null;
const tableNode = ref(null);
export default {
name: "elTableCom",
props: {
scrollNum: {
type: [Number, String],
default: 3,
},
wrapScroll: {
type: [Boolean],
default: false,
},
tableData: {
type: [Array],
default: ()=>{
return [];
},
},
colIndex: {
type: [Boolean],
default: false,
},
columns: {
type: [Array],
default: ()=>{
return [];
},
},
border: {
type: [String, Boolean],
default: false,
},
stripe: {
type: [String, Boolean],
default: false,
},
headAlign: {
type: [String],
default: "left",
},
subHeadAlign: {
type: [String],
default: "left",
},
},
watch: {
tableData: {
handler: function (val) {
this.data = val;
this.$nextTick(function () {
setTimeout(() => {
this.initScroll(val);
}, 1000);
});
},
immediate: true,
deep: true,
},
},
data () {
return {
data: [],
};
},
components: {child},
mounted () {
},
beforeUnmount () {
if (this.wrapScroll) {
this.clearAllInterval();
}
},
methods: {
initScroll (tableData) {
if (!this.wrapScroll) {
return;
}
if (isNaN(this.scrollNum)) {
return;
}
let num = Number(this.scrollNum);
if (tableData && tableData.length > num) {
let dom = tableNode.value = document.querySelector(".cus-table").querySelector(".el-scrollbar__wrap");
scrollHeight = tableNode.value.querySelectorAll("tr")[0].offsetHeight * num;
tableNode.value.style.height = `${scrollHeight}px`;
maxScrollTop = tableNode.value.firstElementChild.offsetHeight - scrollHeight;
dom.onmouseover = () => {
this.clearAllInterval();
};
dom.onmouseout = () => {
this.restTimeInter();
};
this.restTimeInter();
}
},
restTimeInter () {
this.clearAllInterval();
timeInter = setInterval(this.setMultiLine, 4000);
},
clearAllInterval () {
clearInterval(timeInter);
clearInterval(timeInter2);
},
setScrollTop () {
tableNode.value.scrollTop++;
if (tableNode.value.scrollTop >= currentScrollTop) {
clearInterval(timeInter2);
}
if (tableNode.value.scrollTop > maxScrollTop) {
tableNode.value.scrollTop = maxScrollTop;
clearInterval(timeInter2);
}
},
setMultiLine () {
currentScrollTop = (tableNode.value.scrollTop || 0) + scrollHeight + currentScrollTop % scrollHeight;
if (tableNode.value.scrollTop >= maxScrollTop) {
currentScrollTop = 0;
tableNode.value.scrollTop = 0;
this.restTimeInter();
} else {
clearInterval(timeInter2);
timeInter2 = setInterval(this.setScrollTop, 5);
}
},
},
};
</script>
<style scoped lang="scss">
</style>
table子组件
<template>
<el-table-column
:type="col.type || null"
:prop="col.prop || null"
:label="col.label"
:header-align="headAlign"
:align="col.align"
:width="col.width || null">
<template #default="scope">
<template v-if="col.children && col.children.length!==0">
<childTable v-for="(item, i) in col.children"
:key=" item.prop + i"
:align="item.align"
:headAlign="headAlign || subHeadAlign"
:col="item">
</childTable>
</template>
<template v-else-if="col.slot">
<template v-if="col.slotName">
<slot v-bind="{row:scope.row,cols:col}" name="cusSlotScope"></slot>
</template>
</template>
<template v-else>{{scope.row[col.prop]}}</template>
</template>
</el-table-column>
</template>
<script>
export default {
name: "childTable",
props: {
col: {
type: [Object],
default: ()=>{
return {};
},
},
headAlign: {
type: [String],
default: "left",
},
subHeadAlign: {
type: [String],
default: "left",
},
},
data () {
return {};
},
components: {},
mounted () {
},
methods: {},
};
</script>