为什么要进行网站备案,网站建设 功能需求,wordpress缺少样式表,台州seo公司需求描述
当 table 内容过多的时候#xff0c;页面上滑滚动#xff0c;表头的信息也会随着被遮挡#xff0c;无法将表头信息和表格内容对应起来#xff0c;需要进行表头吸顶
开始编码#x1f4aa;
环境#xff1a;vue2.6、element UI step1#xff1a; 给el-table__h…需求描述
当 table 内容过多的时候页面上滑滚动表头的信息也会随着被遮挡无法将表头信息和表格内容对应起来需要进行表头吸顶
开始编码
环境vue2.6、element UI step1 给el-table__header-wrapper加上样式
//style/sticky-table-header.scss.el-table[is-sticky] {overflow: initial;--sticky-top: 0px;--stick-zIndex: 5;.el-table__header-wrapper{position: sticky;top: var(--sticky-top);z-index: var(--stick-zIndex);}.el-table__fixed, .el-table__fixed-right{overflow: visible;z-index: var(--stick-zIndex);.el-table__fixed-header-wrapper {position: sticky;top: var(--sticky-top);width: 100%;overflow: hidden;z-index: var(--stick-zIndex);}.el-table__fixed-body-wrapper {width: 100%;overflow: hidden;}}.el-table__fixed-right {.el-table__fixed-header-wrapper {display: flex;justify-content: flex-end;}.el-table__fixed-body-wrapper {display: flex;justify-content: flex-end;}}.el-table--border::after{z-index: var(--stick-zIndex);}
}.el-table__fixed {--box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.12);
}.el-table__fixed-right {--box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.12);
}.el-table__fixed, .el-table__fixed-right {box-shadow: var(--box-shadow);
}step2 注册指令 directives/sticky-header.js
import /styles/sticky-table-header.scssexport default {bind(el, binding) {el.setAttribute(is-sticky, true)updateStickyTop(el, binding)},update(el, binding) {updateStickyTop(el, binding)}
}const updateStickyTop (el, binding) {const { value, oldValue } bindingif (value oldValue) returnconst top Number(value)if (!isNaN(top)) {el.style.setProperty(--sticky-top, ${top}px)}
}
step3 main.js 引入
import StickyTableHeader from ./directives/sticky-header
Vue.directive(sticky-table-header, StickyTableHeader)step4 table.vue
templatediv classwrapperh3纯CSS表格吸顶/h3el-radio-group v-modelmode aria-hiddentrue classoptionsel-radio labelnormal正常模式/el-radioel-radio labelfixedLeft固定左边列/el-radioel-radio labelfixedRight固定右边列/el-radioel-radio labelfixedLeftRight固定左右列/el-radio/el-radio-groupel-tablev-sticky-table-header0border:datatableDatael-table-column label日期 propdate min-width150 :fixedfixedLeft /el-table-column label姓名 propname width120 /el-table-column label省份 propprovince width120 /el-table-column label市区 propcity width120 /el-table-column label地址 propaddress width300 /el-table-column label邮编 propzip min-width120 :fixedfixedRight //el-table/div
/templatescript
export default {name: CSSFixedTopTable,components: {},data() {const tableData new Array(100).fill(0).map((_, index) {return {date: 2016-05-03,name: 王小虎,province: 上海,city: 普陀区,address: 上海市普陀区金沙江路 ${1 index} 弄,zip: 2000001 index}})return {tableData,mode: normal}},computed: {fixedLeft() {return /left/i.test(this.mode) ? left : null},fixedRight() {return /right/i.test(this.mode) ? right : null}},methods: {}
}
/scriptstyle langscss scoped
.wrapper {width: 800px;margin: 0 auto;.options {width: 100%;margin: 30px 0;text-align: left;}
}
/style ❗️❗️❗️父元素不要有 overflow: hidden;会失效 step5 效果呈现
