下述代码为组件实现代码复制即可食用,默认只展示 一屏数据加两条
全选存在些许问题, 使用row-key时,如果行过多滚动时会不会很流畅
特别需要注意的是 行高必须要保持一致
<template>
<div class="t-table" :id="TTableId">
<el-table
ref="el-table"
:tooltip-effect="tooltipEffect"
:data="tableData"
border
:height="height"
:row-class-name="rowClassName"
:key="tableKey"
:row-key="getRowKey"
@select-all="
val => {
this.selectAll(val, !isAll);
}
"
@select="select"
@current-change="handleCurrentChange"
:highlight-current-row="highlightCurrentRow"
:header-cell-style="headerCellStyle"
:cell-style="cellStyle"
:empty-text="emptyText"
@row-click="
(row, column, event) => this.rowClick(row, column, event, 'table')
"
>
<el-table-column type="index" v-if="index" align="center" fixed>
<template slot-scope="scope">
{{ start > 0 ? scope.$index + start + 1 : scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column
type="selection"
fixed
:reserve-selection="true"
:width="$TableWidth.px46"
v-if="selection"
:selectable="rowSelectable"
></el-table-column>
<slot></slot>
</el-table>
</div>
</template>
<script>
export default {
components: {
},
name: "TTable",
props: {
//表格数据列表
saveDATA: {
typeof: Array,
default: []
},
//表格高度
height: {
typeof: Number,
default: 400
},
//一行高度 为了计算高度,需要行高固定且不能出现换行数据
itemHeight: {
typeof: Number,
default: 49
},
rowClassName: {
typeof: Function,
default: () => {}
},
tooltipEffect: {
typeof: String,
default: ""
},
//行key 必须填写saveDATA里面的变量名
rowKey: {
typeof: String,
default: ""
},
//是否显示复选框列
selection: {
typeof: Boolean,
default: false
},
//是否显示序号列
index: {
typeof: Boolean,
default: false
},
//行禁选方法
rowSelectable: {
typeof: Function,
default: () => {}
},
//是否可以单选
highlightCurrentRow: {
typeof: Boolean,
default: false
},
//表头样式
headerCellStyle: {
typeof: Object
},
//表格样式
cellStyle: {
typeof: Object
},
//无数据文字
emptyText: {
typeof: String,
default: ""
},
colDisable: {
typeof: Array
},
//组件id 如果一个页面需要使用多个ttable组件 需要给此参数赋唯一值
TTableId: {
typeof: String,
default: "t_table"
}
},
data() {
return {
tableData: [], //展示数据列表
tableRef: null, // 设置了滚动的那个盒子
tableWarp: null, // 被设置的transform元素
fixLeft: null, // 固定左侧--设置的transform元素
fixRight: null, // 固定右侧--设置的transform元素
tableFixedLeft: null, // 左侧固定列所在的盒子
tableFixedRight: null, // 右侧固定列所在的盒子
scrollTop: 0, //滚动高度
scrollNum: 0, //当前滚动了几屏数据 scrollTop / (itemHeight * pageList)
scrollRowNum: 0, //记录当前滚动了多少条数据
start: 0, //默认截取数据开始位数
end: this.pageList + 2, //默认截取数据结束位数
selectList: [], //当前选中的列表
isAll: false, //是否全选
tableKey: "", //表格key
currentRow: "", //单选数据
};
},
watch: {
//每滚动一条数据则更改展示数据源并且更改容器偏移量
scrollRowNum(newV) {
this.start = newV - 1;
this.end = this.pageList + newV + 1;
if (this.start <= 0) this.start = 0;
this.tableData = this.saveDATA.slice(this.start, this.end);
if (this.currentRow) this.setCurrentRow(this.currentRow);
requestAnimationFrame(() => {
// 计算偏移量
let translateY = `translateY(${this.start * this.itemHeight}px)`;
this.tableWarp.style.transform = translateY;
if (this.fixLeft) {
this.fixLeft.style.transform = translateY;
}
if (this.fixRight) {
this.fixRight.style.transform = translateY;
}
this.doLayout();
});
},
saveDATA: {
handler(val) {
this.init();
this.initMounted();
},
deep: true // 深度监听
},
pageList() {
this.init();
this.initMounted();
}
},
created() {
},
mounted() {
this.$nextTick(() => {
this.tableSetRef = this.GetTableRef();
});
},
methods: {
clearIndex() {
this.start = 0;
this.end = this.pageList + 2;
this.scrollNum = 0;
if (this.tableRef) this.tableRef.scrollTop = 0;
},
//初始化表格内容盒子
initMounted() {
this.$nextTick(() => {
let box = document.getElementById(this.TTableId);
// 设置了滚动的盒子
this.tableRef = this.$refs["el-table"].bodyWrapper;
// 左侧固定列所在的盒子
this.tableFixedLeft = box.querySelector(
".el-table .el-table__fixed .el-table__fixed-body-wrapper"
);
// 右侧固定列所在的盒子
this.tableFixedRight = box.querySelector(
".el-table .el-table__fixed-right .el-table__fixed-body-wrapper"
);
/**
* fixed-left | 主体 | fixed-right
*/
// 创建内容盒子divWarpPar并且高度设置为所有数据所需要的总高度
let dwp = box.getElementsByClassName("divWarpPar")[0];
if (dwp) {
dwp.style.height = this.saveDATA.length * this.itemHeight + "px";
} else {
let divWarpPar = document.createElement("div");
divWarpPar.className = "divWarpPar";
// 如果这里还没获取到saveDATA数据就渲染会导致内容盒子高度为0，可以通过监听saveDATA的长度后再设置一次高度
divWarpPar.style.height =
this.saveDATA.length * this.itemHeight + "px";
// 新创建的盒子divWarpChild
let divWarpChild = document.createElement("div");
divWarpChild.className = "fix-warp divWarpChild";
// 把tableRef的第一个子元素移动到新创建的盒子divWarpChild中
divWarpChild.append(this.tableRef.children[0]);
// 把divWarpChild添加到divWarpPar中，最把divWarpPar添加到tableRef中
divWarpPar.append(divWarpChild);
this.tableRef.append(divWarpPar);
}
// left改造
let dlp = box.getElementsByClassName("divLeftPar")[0];
if (dlp) {
dlp.style.height = this.saveDATA.length * this.itemHeight + "px";
} else {
let divLeftPar = document.createElement("div");
divLeftPar.className = "divLeftPar";
divLeftPar.style.height =
this.saveDATA.length * this.itemHeight + "px";
let divLeftChild = document.createElement("div");
divLeftChild.className = "fix-left";
this.tableFixedLeft &&
divLeftChild.append(this.tableFixedLeft.children[0]);
divLeftPar.append(divLeftChild);
this.tableFixedLeft && this.tableFixedLeft.append(divLeftPar);
}
// right改造
let drp = box.getElementsByClassName("divRightPar")[0];
if (drp) {
drp.style.height = this.saveDATA.length * this.itemHeight + "px";
} else {
let divRightPar = document.createElement("div");
divRightPar.className = "divRightPar";
divRightPar.style.height =
this.saveDATA.length * this.itemHeight + "px";
let divRightChild = document.createElement("div");
divRightChild.className = "fix-right";
this.tableFixedRight &&
divRightChild.append(this.tableFixedRight.children[0]);
divRightPar.append(divRightChild);
this.tableFixedRight && this.tableFixedRight.append(divRightPar);
}
// 被设置的transform元素
this.tableWarp = box.querySelector(
".el-table .el-table__body-wrapper .fix-warp"
);
this.fixLeft = box.querySelector(
".el-table .el-table__fixed .el-table__fixed-body-wrapper .fix-left"
);
this.fixRight = box.querySelector(
".el-table .el-table__fixed-right .el-table__fixed-body-wrapper .fix-right"
);
this.tableRef.addEventListener("scroll", this.onScroll);
});
},
// 初始化数据
init() {
this.clearIndex();
this.tableData = this.saveDATA.slice(this.start, this.end);
},
// 滚动事件
onScroll() {
//解决固定行 与 非固定行 滚动时错位问题
let body = document.getElementById(this.TTableId);
let fixedBox = body.getElementsByClassName(
"el-table__fixed-body-wrapper"
);
if (fixedBox) {
for (let i = 0; i < fixedBox.length; i++) {
const element = fixedBox[i];
element.scrollTop = this.tableRef.scrollTop;
}
}
//,
this.scrollTop = this.tableRef.scrollTop; //获取顶部距离
this.scrollNum =
Math.floor(this.scrollTop / (this.itemHeight * this.pageList)) + 1; //计算滚动到几屏数据
this.scrollRowNum = Math.ceil(this.scrollTop / this.itemHeight); //计算已经滚动了多少条数据
//移除掉滚动时遗留的hover-row
if (this.GetTableRef()) {
const elements = body.getElementsByClassName(
"hover-row"
);
for (let i = 0; i < elements.length; i++) {
elements[i].classList.remove("hover-row");
}
}
},
//获取表格ref
GetTableRef() {
return this.$refs["el-table"];
},
//刷新表格key
RefreshTableKey() {
this.tableKey = this.$common.GetNextStr();
this.clearIndex();
this.initMounted();
},
//设置行key
getRowKey(row) {
return this.$common.GetValueByPath(row, this.rowKey);
},
//单行选择触发事件
select(val) {
this.selectList = val;
this.$emit("selection-change", val);
},
//全选触发事件
selectAll(val, isAll) {
this.isAll = isAll;
if (isAll) {
let list = JSON.parse(JSON.stringify(this.saveDATA));
if (this.rowSelectable)
this.selectList = list.filter((m, i) => this.rowSelectable(m, i));
else this.selectList = list;
let dList = this.selectList.filter(
m => val.findIndex(k => JSON.stringify(k) == JSON.stringify(m)) == -1
);
dList.forEach(row => {
this.GetTableRef().toggleRowSelection(row);
});
} else {
this.clearSelection();
}
this.$emit("selection-change", this.selectList);
},
//清空表格
clearSelection() {
this.GetTableRef().clearSelection();
this.selectList = [];
this.$emit("selection-change", this.selectList);
},
//单行选中触发事件
handleCurrentChange(val) {
this.currentRow = val;
this.$emit("current-change", val);
},
//设置指定行为单行选中
setCurrentRow(row) {
this.currentRow = row;
this.GetTableRef().setCurrentRow(row);
},
rowClick(row, column, event) {
this.$emit("row-click", row, column, event);
},
//重新布局表格
doLayout() {
this.GetTableRef().doLayout();
},
},
computed: {
pageList() {
return Math.ceil(this.height / this.itemHeight);
}
}
};
</script>
<style>
.t-table .el-table__body-wrapper {
overflow: auto !important;
background-blend-mode: overlay !important;
}
</style>
下面为调用示例
<template>
<div class="t-table" id="t_table">
<TTable :saveDATA="saveDATA" :height="200">
<el-table-column fixed label="id" prop="id"></el-table-column>
<el-table-column fixed label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column
label="地址"
prop="address"
min-width="300"
></el-table-column>
<el-table-column
label="地址"
prop="address"
min-width="300"
></el-table-column>
<el-table-column
label="地址"
prop="address"
min-width="300"
></el-table-column>
<el-table-column
label="地址"
prop="address"
min-width="300"
></el-table-column>
<el-table-column
label="地址"
prop="address"
min-width="300"
></el-table-column>
<el-table-column
label="地址"
prop="address"
min-width="300"
></el-table-column>
</TTable>
</div>
</template>
<script>
import TTable from "../../../src/components/TTable.vue";
export default {
components: {
TTable,
},
props: {},
data() {
return {
saveDATA: [], // 所有数据
};
},
watch: {},
created() {
},
mounted() {
this.init();
},
methods: {
init() {
this.saveDATA = [];
for (let i = 0; i < 2000; i++) {
this.saveDATA.push({
id: i,
name: `张三${i}`,
age: i,
address: "重庆市渝中区两路口阿士大夫撒多富士达浪费的水立方as的裂缝阿萨德立法技术放两三分啥地方了as的裂缝as了巅峰就啥的立法啥的立法阿斯蒂芬了as的裂缝就啥砥砺奋进阿萨德理发店发了"
});
}
}
}
};
</script>
标签：el,element,let,typeof,saveDATA,组件,table,2.14,row From： https://www.cnblogs.com/2000New/p/17899379.html